Créer Natural Edge avec CSS

Question

J'essaye de créer une colonne strat attrayante (géologie). Je dois en créer plusieurs centaines, donc maintenir l'uniformité demande une solution CSS.

Vous trouverez ci-dessous une version dessinée à la main qui a un joli bord naturel sur la gauche, par rapport à mon horrible tentative d'utilisation de CSS.

Voici mon code que j'ai utilisé pour créer la version informatique ci-dessus, bien qu'il ne fonctionne pas parfaitement, car je n'ai pas mes trappes sur un serveur (je suis juste en train d'exécuter le HTML sur mon ordinateur).

#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(&quot;img/pngs/Ls.png&quot;); background-color: #eac896;"></div>
<div id="m2" class="member slope" style="height: 15px; background-image: url(&quot;img/pngs/Ss.png&quot;); background-color: gray;"></div>
<div id="m3" class="member slope" style="height: 20px; background-image: url(&quot;img/pngs/Ls.png&quot;); background-color: #eac896;"></div>
<div id="m4" class="member slope" style="height: 15px; background-image: url(&quot;img/pngs/Mi.png&quot;); background-color: #E46254;"></div>
<div id="m5" class="member slope" style="height: 15px; background-image: url(&quot;img/pngs/Ls.png&quot;); background-color: #eac896;"></div>
<div id="m6" class="member slope" style="height: 15px; background-image: url(&quot;img/pngs/Ss.png&quot;); background-color: gray;"></div>
<div id="m7" class="member slope" style="height: 20px; background-image: url(&quot;img/pngs/Ls.png&quot;); background-color: #eac896;"></div>
<div id="m8" class="member slope" style="height: 20px; background-image: url(&quot;img/pngs/Ms.png&quot;); background-color: #E46254;"></div>
<div id="m9" class="member slope" style="height: 20px; background-image: url(&quot;img/pngs/Ls.png&quot;); background-color: #eac896;"></div>
<div id="m10" class="member slope" style="height: 20px; background-image: url(&quot;img/pngs/Ms.png&quot;); background-color: #E46254;"></div>
<div id="m11" class="member ledge" style="height: 15px; background-image: url(&quot;img/pngs/Cg.png&quot;); background-color: gray;"></div>
<div id="m12" class="member slope" style="height: 30px; background-image: url(&quot;img/pngs/Ms.png&quot;); background-color: #E46254;"></div>
<div id="m13" class="member ledge" style="height: 15px; background-image: url(&quot;img/pngs/Cg.png&quot;); background-color: gray;"></div>
<div id="m14" class="member slope" style="height: 75px; background-image: url(&quot;img/pngs/Ms.png&quot;); background-color: #E46254;"></div>
<div id="m15" class="member ledge" style="height: 350px; background-image: url(&quot;img/pngs/Cg.png&quot;); background-color: #e44539;"></div>
<div id="m16" class="member slope" style="height: 350px; background-image: url(&quot;img/pngs/Ss.png&quot;); background-color: #de9b81;"></div>
</div>
</div>

Answer 1

Peut-être qu'un filtre SVG peut vous rapprocher et que vous n'avez pas besoin de beaucoup changer votre code. J'ai simplement remplacé l'astuce du dégradé par 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(&quot;img/pngs/Ls.png&quot;); background-color: #eac896;"></div>
    <div id="m2" class="member slope" style="height: 15px; background-image: url(&quot;img/pngs/Ss.png&quot;); background-color: gray;"></div>
    <div id="m3" class="member slope" style="height: 20px; background-image: url(&quot;img/pngs/Ls.png&quot;); background-color: #eac896;"></div>
    <div id="m4" class="member slope" style="height: 15px; background-image: url(&quot;img/pngs/Mi.png&quot;); background-color: #E46254;"></div>
    <div id="m5" class="member slope" style="height: 15px; background-image: url(&quot;img/pngs/Ls.png&quot;); background-color: #eac896;"></div>
    <div id="m6" class="member slope" style="height: 15px; background-image: url(&quot;img/pngs/Ss.png&quot;); background-color: gray;"></div>
    <div id="m7" class="member slope" style="height: 20px; background-image: url(&quot;img/pngs/Ls.png&quot;); background-color: #eac896;"></div>
    <div id="m8" class="member slope" style="height: 20px; background-image: url(&quot;img/pngs/Ms.png&quot;); background-color: #E46254;"></div>
    <div id="m9" class="member slope" style="height: 20px; background-image: url(&quot;img/pngs/Ls.png&quot;); background-color: #eac896;"></div>
    <div id="m10" class="member slope" style="height: 20px; background-image: url(&quot;img/pngs/Ms.png&quot;); background-color: #E46254;"></div>
    <div id="m11" class="member ledge" style="height: 15px; background-image: url(&quot;img/pngs/Cg.png&quot;); background-color: gray;"></div>
    <div id="m12" class="member slope" style="height: 30px; background-image: url(&quot;img/pngs/Ms.png&quot;); background-color: #E46254;"></div>
    <div id="m13" class="member ledge" style="height: 15px; background-image: url(&quot;img/pngs/Cg.png&quot;); background-color: gray;"></div>
    <div id="m14" class="member slope" style="height: 75px; background-image: url(&quot;img/pngs/Ms.png&quot;); background-color: #E46254;"></div>
    <div id="m15" class="member ledge" style="height: 350px; background-image: url(&quot;img/pngs/Cg.png&quot;); background-color: #e44539;"></div>
    <div id="m16" class="member slope" style="height: 350px; background-image: url(&quot;img/pngs/Ss.png&quot;); 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>