CSS SNIPPET

  返回

锯齿形的区域分隔效果  视觉效果

使用一个SVG形状分隔两个不同的块,从而创建出与标准的水平分隔相比 更加有趣的视觉效果。

HTML
<div class="shape-separator"></div>
CSS
.shape-separator {
  position: relative;
  height: 48px;
  background: #333;
}
.shape-separator::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}
效果演示
代码说明
  1. 元素的position: relative 为伪元素建立笛卡尔定位上下文。
  2. ::after 定义一个伪元素。
  3. background-image: url(...) 添加 SVG 形状(一个 24x12 的三角形)作为伪元素的背景图像,默认重复。 图像必须和要隔开的块元素有相同的颜色。要使用其他形状,可以参考the URL-encoder for SVG
  4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
  5. width: 100% 确保元素扩展至父元素的整个宽度。
  6. height: 12px 是SVG形状的高度。
  7. bottom: 0 将伪元素定位在父元素的底部。
浏览器支持

100.0%