I am in the process of designing an eye-catching strat column for geology. I will need to create a substantial number of them, so I am looking for a CSS solution to maintain consistency.
Below, you can see a hand-drawn version that exhibits a beautiful, natural edge on the left side compared to my less than ideal attempt using CSS.
https://i.sstatic.net/YmI65.jpg https://i.sstatic.net/9GzLB.jpg
The code I used to generate the computerized version above is provided below. However, it is not functioning perfectly since I do not have my hatches on a server (I am simply running the HTML on my local machine).
#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>