Membuat Edge Alami dengan CSS

Question

Saya mencoba membuat kolom strat yang menarik (geologi). Saya perlu membuat beberapa ratus, jadi menjaga keseragaman membutuhkan solusi CSS.

Di bawah ini adalah versi gambar tangan yang memiliki tepi alami yang bagus di sebelah kiri, versus upaya mengerikan saya menggunakan CSS.

Di bawah ini adalah kode yang saya gunakan untuk membuat versi komputer di atas, meskipun tidak berfungsi dengan sempurna, karena saya tidak memiliki arsiran saya di server (saya hanya menjalankan HTML di komputer saya).

#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

Mungkin filter SVG bisa mendekatkan Anda dan Anda tidak perlu banyak mengubah kode Anda. Saya hanya mengganti trik gradien dengan aclip-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>