Creando Natural Edge con CSS
Oct 15 2020
Estoy tratando de crear una columna de estrategia atractiva (geología). Necesito crear varios cientos de ellos, por lo que mantener la uniformidad requiere una solución CSS.
A continuación se muestra una versión dibujada a mano que tiene un bonito borde natural a la izquierda, en comparación con mi horrible intento de usar CSS.
A continuación se muestra el código que utilicé para crear la versión de computadora anterior, aunque no funciona perfectamente, ya que no tengo mis escotillas en un servidor (solo estoy ejecutando el HTML en mi computadora).
#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>Respuestas
1 TemaniAfif Oct 15 2020 at 03:13
Tal vez un filtro SVG pueda acercarlo más y no necesita cambiar mucho en su código. Simplemente reemplacé el truco del degradado con unclip-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>