ZigZag нижняя граница блока с отображением таким же образом и тени

Question

Как можно доиться того, чтоб нижняя граница была в форме зигзага, но не перекрывала тень самого блока? Есть много вариантов просто "зигзаг", но они не решают проблему с тенью. Как видно на скриншоте - задний основной фон белый и у самого блока тоже фон белый, тень описывает нижнюю границу как будто она изначально такая. Как этого добиться с помощью CSS?

Я пробовал два варианта.

1.

after {
        background: linear-gradient(-45deg, rgba(221, 221, 221, 0.4) 15px, transparent 0), linear-gradient(45deg, rgba(221, 221, 221, 0.4) 15px, transparent 0);
        background-position: left-bottom;
        background-repeat: repeat-x;
        background-size: 35px 35px;
        content: " ";
        display: block;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 32px; 
}

after { background:#ddd; content:""; height: 20px; position:absolute; top:100%; left:0; right:0; clip-path:polygon( 0 0, 2.5% 100%, 5% 0, 7.5% 100%, 10% 0,12.5% 100%,15% 0, 17.5% 100%, 20% 0,22.5% 100%,25% 0, 27.5% 100%, 30% 0,32.5% 100%,35% 0, 37.5% 100%, 40% 0,42.5% 100%,45% 0, 47.5% 100%, 50% 0,52.5% 100%,55% 0, 57.5% 100%, 60% 0,62.5% 100%,65% 0, 67.5% 100%, 70% 0,72.5% 100%,75% 0, 77.5% 100%, 80% 0,82.5% 100%,85% 0, 87.5% 100%, 90% 0,92.5% 100%,95% 0, 97.5% 100%, 100% 0); }

Но ни один из них не решает проблему.

Answer 1

Если я правильно понял вопрос, то тень нужна непосредственно по зубцам. Это можно сделать добавлением такого же элемента только под основной полигон. Как то так:

UPDATE

#box {
  position: relative;
  width: 100%;
  height: 120px;
  top: 1px;
  left: 1px;
  margin-left: 0px;
}

#content {
  width: 100%;
  height: 100%;
  background: #FFF;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 83%, 70% 100%, 0 100%);
  clip-path:polygon( 0 0, 2.5% 100%, 5% 0, 7.5% 100%, 10% 0,12.5% 100%,15% 0, 17.5% 100%, 20% 0,22.5% 100%,25% 0, 27.5% 100%, 30% 0,32.5% 100%,35% 0, 37.5% 100%, 40% 0,42.5% 100%,45% 0, 47.5% 100%, 50% 0,52.5% 100%,55% 0, 57.5% 100%, 60% 0,62.5% 100%,65% 0, 67.5% 100%, 70% 0,72.5% 100%,75% 0, 77.5% 100%, 80% 0,82.5% 100%,85% 0, 87.5% 100%, 90% 0,92.5% 100%,95% 0, 97.5% 100%, 100% 0);
}

#shadow {
  position: absolute;
  z-index: -1;
  content: "";
  background: rgba(0, 0, 0, .1);
  width: 100%;
  height: 120px;
  left: 1px;
  top: 10px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 83%, 70% 100%, 0 100%);
  clip-path:polygon( 0 0, 2.5% 100%, 5% 0, 7.5% 100%, 10% 0,12.5% 100%,15% 0, 17.5% 100%, 20% 0,22.5% 100%,25% 0, 27.5% 100%, 30% 0,32.5% 100%,35% 0, 37.5% 100%, 40% 0,42.5% 100%,45% 0, 47.5% 100%, 50% 0,52.5% 100%,55% 0, 57.5% 100%, 60% 0,62.5% 100%,65% 0, 67.5% 100%, 70% 0,72.5% 100%,75% 0, 77.5% 100%, 80% 0,82.5% 100%,85% 0, 87.5% 100%, 90% 0,92.5% 100%,95% 0, 97.5% 100%, 100% 0);
}

<div id="box">
  <div id="content"></div>
  <div id="shadow"></div>
</div>

БЛОГ НА HUSL

ZigZag нижняя граница блока с отображением таким же образом и тени

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