Tworzenie Natural Edge za pomocą CSS
Oct 15 2020
Próbuję stworzyć atrakcyjną kolumnę warstwową (geologia). Muszę stworzyć ich kilkaset, więc zachowanie jednolitości wymaga rozwiązania CSS.
Poniżej znajduje się ręcznie rysowana wersja z ładną, naturalną krawędzią po lewej stronie, w porównaniu z moją okropną próbą użycia CSS.
Poniżej znajduje się mój kod, którego użyłem do stworzenia powyższej wersji komputerowej, chociaż nie działa on idealnie, ponieważ nie mam swoich kresek na serwerze (po prostu uruchamiam HTML na moim komputerze).
#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>Odpowiedzi
1 TemaniAfif Oct 15 2020 at 03:13
Może filtr SVG może Cię zbliżyć i nie musisz dużo zmieniać w swoim kodzie. Po prostu zastąpiłem sztuczkę gradientową rozszerzeniemclip-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>