使用CSS创建自然边缘

Question

我正在尝试创建一个有吸引力的地层柱（地质学）。由于需要创建数百个，因此保持一致性需要CSS解决方案。

下面是手绘版本，左边有一个很好的自然边缘，而我的CSS尝试则很糟糕。

以下是我用来创建上述计算机版本的代码，但它并不完美，因为我的线样式没有放在服务器上（我只是在我的电脑上运行HTML）。

#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>

- Thomas

---

我有一个想法，但没有时间去尝试它。基本思路是使用 https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path。 - epascarello

这个回答解决了你的问题吗？我可以使用CSS来扭曲边框，使其看起来像素描吗？ - shreyasm-dev

CSS 在这里不是正确的选择。SVG 明显是正确的选择。 - Paulie_D

如果你真的想要左边那个图形一样不完美的效果，我建议你尝试使用canvas或SVG，而不是无休止地在CSS中雕刻细节。一个捷径是使用一些图形库，比如d3.js，并在其侧面制作一个阴影线图。 - Hussein Duvigneau

我不确定剪辑路径如何能够创建自然的外观，它似乎需要基本形状（例如圆形）。边框图像的想法可能可以被拉伸和改变以更自然的方式呈现，我会研究一下。我喜欢使用SVG，但我没有看到如何在这个应用程序中使用SVG。 - Thomas

Answer 1

也许使用SVG过滤器可以让你更接近目标，而且不需要在代码中做太多改动。我只是用一个clip-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>

- Temani Afif

---

@Termani。SVG剪辑路径对我来说是新的。有一些非常令人兴奋的可能性，谢谢。矩阵对我也是新的，我没有很好地理解它。它似乎在稍微平滑边缘。你能否添加一些解释，说明你选择的具体值正在做什么？这将帮助我调整它以获得我想要的外观。 - Thomas

@Thomas 这是一篇关于该效果的详细文章：https://css-tricks.com/gooey-effect/ - Temani Afif