Мне нужно создать что-то вроде этого, чтобы разделить разделы в мобильном дизайне:
Я могу легко создать угловую часть с помощью CSS, но мне трудно получить правильную тень блока. Проблема в том, что мне нужна только тень окна в нижней части до и после псевдоэлементов. Но он добавляется со всех сторон, поэтому, когда два элемента встречаются посередине, образуя точку, тени блока перекрываются.
См. здесь, например:
Вот что у меня есть (jsfiddle: https://jsfiddle.net/47zqjzmf/1/ )
HTML:
<div class="wrapper">
<div class="inner"></div>
</div>
CSS:
.wrapper {
display: inline-block;
background: #fff;
width: 300px;
height: 300px;
overflow: hidden;
}
.inner {
position: relative;
background: lightblue;
width: 100%;
height: 120px;
}
.inner:before, .inner:after {
content: '';
position: absolute;
bottom: -10px;
width: calc(50% + 5px);
height: 20px;
background-color: #fff;
box-shadow: 1px 1px 10px 1px #000;
}
.inner:before {
left: -2px;
transform: rotate(7deg);
}
.inner:after {
right: -2px;
transform: rotate(-7deg);
}
Любые предложения о том, как я могу добиться этого эффекта?
