CSS3 Установить Box Shadow для угла наклона

Я кодирую некоторые причудливые вещи для обучения себя.

У меня есть левый угол наклона. Теперь я хочу добавить тень от коробки, и она показала следующее изображение:

Это мой фрагмент кода:

html, body {
    margin: 0px;
}

.navbar {
  position:relative;
  content:""; 
   border-left: 300em solid #454545;
   border-bottom: 120px solid transparent;
  z-index: 2;
  box-shadow: 0px 8px 23px 4px black;
}


.under-bar {
    margin-top: -40px;
    background: #851e39;
    height: 200px;
    opacity: 0.8
}

<html>
   <body>
        <div class="navbar">

        </div>
        <div class="under-bar">
        </div> 
    </body>
</html>

Может кто-нибудь помочь мне установить box-shadow под заголовком?

Источник

2 ответа

Решение

Ты можешь использовать transform: rotate(); вместо пограничных трюков.

body {
  margin: 0;
}
.navbar {
  height: 200px;
  background-color: #9d4b61;
  position: relative;
  overflow: hidden;
}
.navbar:before {
  content: "";
  position: absolute;
  left: 0;
  top: -50px;
  width: 100%;
  height: 100px;
  box-shadow: 0px 8px 23px 4px #000;
  transform: rotate(-1deg);
  background-color: #333;
}
.menu {
  position: relative;
  left: 20px;
  top: 20px;
  color: #fff;
}
<div class="navbar">
  <div class="menu">menu</div>
</div>

Источник

Вы можете использовать border-radius а также transform: scale:

body {
  margin: 0;
  background: #9d4b61;
}

.navbar {
  width: 100%;
  height: 50px;
  background: #5c5c5c;
  border-radius: 0 0 100%/22px 0;
  box-shadow: 0px 8px 23px 4px rgba(0,0,0,0.8);
  transform: scale(1.1,1);
}
<div class="navbar"></div>

border-radius: 0 0 100%/22px 0 установите радиус в нижнем правом углу, который имеет ширину 100% и высоту 22 пикселя, придавая радиусу "растянутый" вид.

transform: scale(1.1,1) растягивает весь элемент, чтобы скрыть коробку-тень с каждой стороны.

Источник
Другие вопросы по тегам