Создание натурально закругленных углов с помощью CSS
Я пытаюсь создать привлекательную пластовую колонку (геология). Мне нужно создать несколько сотен таких, поэтому для поддержания единообразия требуется решение CSS.
Ниже представлена нарисованная от руки версия с красивым естественным краем слева по сравнению с моей ужасной попыткой использования CSS.
Ниже приведен мой код, который я использовал для создания указанной выше компьютерной версии, хотя он не работает идеально, так как у меня нет штрихов на сервере (я просто запускаю HTML на своем компьютере).
#strat-pane { position:absolute; top:0; bottom:0; right:0; left:0; }
#strat-column { margin:30px auto; width:90px; }
.member { width:120px; border:1px solid black; position: relative; }
.member.slope:after { content: ''; display: block; position: absolute; top: -1px; bottom: 0; right: -1px; width: 50%; background: linear-gradient(to bottom left, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%) 0 0/100% 100%; }
<div id="strat-pane">
<div id="strat-column">
<div id="m1" class="member slope" style="height: 15px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
<div id="m2" class="member slope" style="height: 15px; background-image: url("img/pngs/Ss.png"); background-color: gray;"></div>
<div id="m3" class="member slope" style="height: 20px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
<div id="m4" class="member slope" style="height: 15px; background-image: url("img/pngs/Mi.png"); background-color: #E46254;"></div>
<div id="m5" class="member slope" style="height: 15px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
<div id="m6" class="member slope" style="height: 15px; background-image: url("img/pngs/Ss.png"); background-color: gray;"></div>
<div id="m7" class="member slope" style="height: 20px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
<div id="m8" class="member slope" style="height: 20px; background-image: url("img/pngs/Ms.png"); background-color: #E46254;"></div>
<div id="m9" class="member slope" style="height: 20px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
<div id="m10" class="member slope" style="height: 20px; background-image: url("img/pngs/Ms.png"); background-color: #E46254;"></div>
<div id="m11" class="member ledge" style="height: 15px; background-image: url("img/pngs/Cg.png"); background-color: gray;"></div>
<div id="m12" class="member slope" style="height: 30px; background-image: url("img/pngs/Ms.png"); background-color: #E46254;"></div>
<div id="m13" class="member ledge" style="height: 15px; background-image: url("img/pngs/Cg.png"); background-color: gray;"></div>
<div id="m14" class="member slope" style="height: 75px; background-image: url("img/pngs/Ms.png"); background-color: #E46254;"></div>
<div id="m15" class="member ledge" style="height: 350px; background-image: url("img/pngs/Cg.png"); background-color: #e44539;"></div>
<div id="m16" class="member slope" style="height: 350px; background-image: url("img/pngs/Ss.png"); background-color: #de9b81;"></div>
</div>
</div>Свободный перевод вопроса Creating Natural Edge with CSS от участника @Thomas.
Ответы (1 шт):
Автор решения: Alexandr_TT
→ Ссылка
Возможно, фильтр SVG может приблизить вас к решению, и вам не нужно сильно менять код. Я просто заменил трюк с градиентом на clip-path
#strat-pane {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
filter: url('#goo');
}
#strat-column {
margin: 30px auto;
width: 90px;
}
.member {
width: 120px;
position: relative;
}
.slope {
clip-path:polygon(0 0,0 100%,100% 100%,80% 0);
}<div id="strat-pane">
<div id="strat-column">
<div id="m1" class="member slope" style="height: 15px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
<div id="m2" class="member slope" style="height: 15px; background-image: url("img/pngs/Ss.png"); background-color: gray;"></div>
<div id="m3" class="member slope" style="height: 20px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
<div id="m4" class="member slope" style="height: 15px; background-image: url("img/pngs/Mi.png"); background-color: #E46254;"></div>
<div id="m5" class="member slope" style="height: 15px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
<div id="m6" class="member slope" style="height: 15px; background-image: url("img/pngs/Ss.png"); background-color: gray;"></div>
<div id="m7" class="member slope" style="height: 20px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
<div id="m8" class="member slope" style="height: 20px; background-image: url("img/pngs/Ms.png"); background-color: #E46254;"></div>
<div id="m9" class="member slope" style="height: 20px; background-image: url("img/pngs/Ls.png"); background-color: #eac896;"></div>
<div id="m10" class="member slope" style="height: 20px; background-image: url("img/pngs/Ms.png"); background-color: #E46254;"></div>
<div id="m11" class="member ledge" style="height: 15px; background-image: url("img/pngs/Cg.png"); background-color: gray;"></div>
<div id="m12" class="member slope" style="height: 30px; background-image: url("img/pngs/Ms.png"); background-color: #E46254;"></div>
<div id="m13" class="member ledge" style="height: 15px; background-image: url("img/pngs/Cg.png"); background-color: gray;"></div>
<div id="m14" class="member slope" style="height: 75px; background-image: url("img/pngs/Ms.png"); background-color: #E46254;"></div>
<div id="m15" class="member ledge" style="height: 350px; background-image: url("img/pngs/Cg.png"); background-color: #e44539;"></div>
<div id="m16" class="member slope" style="height: 350px; background-image: url("img/pngs/Ss.png"); background-color: #de9b81;"></div>
</div>
</div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -15" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>Свободный перевод ответа от участника @Temani Afif.