形状分隔符
使用SVG形状在两个不同的块之间创建分隔符。
- 使用
::after
伪元素创建分隔符元素。 - 使用
background-image
通过数据URI添加SVG形状(一个24x12的三角形)。背景图像默认会重复,覆盖伪元素的整个区域。 - 使用父元素的
background
属性设置所需的分隔符颜色。
<div class="shape-separator"></div>
.shape-separator {
position: relative;
height: 48px;
background: #9C27B0;
}
.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='transparent'/%3E%3C/svg%3E");
position: absolute;
width: 100%;
height: 12px;
bottom: 0;
}