时间戳

首页 > 解决方案 > 使用 CSS 创建自然边缘

html - 使用 CSS 创建自然边缘

问题描述

我正在尝试创建一个有吸引力的战略专栏（地质）。我需要创建数百个，因此需要 CSS 解决方案来保持一致性。

下面是一个手绘版本，左边有一个漂亮、自然的边缘，而不是我使用 CSS 的可怕尝试。

手绘 Strat 柱 CSS 尝试 Strat Column

下面是我用来创建上述计算机版本的代码，虽然它不能完美运行，因为我在服务器上没有孵化（我只是在我的计算机上运行 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>

标签： htmlcss

解决方案

也许 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>

推荐阅读