CSS ile Natural Edge Oluşturma

Question

Çekici bir katman sütunu (jeoloji) oluşturmaya çalışıyorum. Birkaç yüz tane oluşturmam gerekiyor, bu yüzden tekdüzelik sağlamak bir CSS çözümü için gerekli.

Aşağıda, CSS kullanma konusundaki korkunç girişimime karşı, solda hoş, doğal bir kenarı olan elle çizilmiş bir versiyon var.

Aşağıda, yukarıdaki bilgisayar sürümünü oluşturmak için kullandığım kodum var, ancak mükemmel çalışmıyor, çünkü bir sunucuda kapaklarım yok (HTML'yi bilgisayarımda çalıştırıyorum).

#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

Belki bir SVG filtresi sizi yaklaştırabilir ve kodunuzda çok fazla değişiklik yapmanız gerekmez. Gradyan numarasını basitçe birclip-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>