Тени для геометрических фигур

Question

Нужен подобный треугольник на сайте:

Создал следующим образом:

&__triangle {
    position: absolute;
    top: -35px;

    width: 0;
    height: 0;
    border-bottom: 45px solid #FFF;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0, 0.1);
}

Как видите, он, как и блок в котором он находится имеет тень, и если с добавлением теней для блока проблем не возникло, то при попытке добавить его к треугольнику обычным способом ( box-shadow: 0px 0px 10px 0px rgba(0,0,0, 0.1); ), происходит следующая аномалия:

Answer 1

body {
  padding-top: 100px;
}

.line {
  height: 5px;
  
  background-color: #d55858d6;
}

.nav {
  position: relative;
  overflow: hidden;
  
  height: 50px;
  background-color: #ebebeb;
}

.triangle {
  position: absolute;
  transform: rotate(45deg);
  left: 50px;
  bottom: -10px;
  
  width: 20px;
  height: 20px;
  
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

<header>
  <div class="line"></div>
  <nav class="nav">
    <div class="triangle"></div>
  </nav>
</header>

Answer 2

С небольшим hover эффектом сделал пример

.nav {
  display: flex;
  justify-content: space-around;
  position: relative;
  padding-bottom: 60px;
  width: 600px;
  margin: auto;
  font-family: sans-serif;
}

.item {
  text-align: center;
  width: 100%;
  cursor: pointer;
}

h3 {
  color: tomato;
}

span {
  color: #ccc;
}

.svg {
  position: absolute;
  left: 0px;
  bottom: 0;
  height: 40px;
  overflow: hidden;
  transition: 0.34s linear;
}

.b:hover~.svg {
  margin-left: 32.5%;
}

.c:hover~.svg {
  margin-left: 67%;
}

<div class="nav">
  <div class="item a">
    <h3>John Doe</h3>
    <span>Co-Founder</span>
  </div>
  <div class="item b">
    <h3>Emila Lake</h3>
    <span>Producer</span>
  </div>
  <div class="item c">
    <h3>Lidia Suvorova</h3>
    <span>Reporter</span>
  </div>
  <div class="svg">
    <svg width="200" height="40">
      <defs>
      <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#fff" stop-opacity="30%" />
        <stop offset="100%" stop-color="#ccc" stop-opacity="70%" />
      </linearGradient>
      <linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#ccc" stop-opacity="70%" />
        <stop offset="100%" stop-color="#fff" stop-opacity="30%" />
      </linearGradient>
      </defs>
      <path d="M0,0 100,0 100,10, 80,40 0,40z" fill="url(#g1)"/>
      <path d="M100,0 100,10 120,40 200,40 200,0" fill="url(#g2)"/>
    </svg>
  </div>
</div>

БЛОГ НА HUSL

Тени для геометрических фигур

Ответы (2 шт):