css 不规则线条 |css一条边框线两种颜色吗

CSS 中有许多方法可以创建不规则线条，这些线条可以在网站设计中起到非常实用的作用。在接下来的文章中，大家将介绍几种创建不规则线条的方法。

/* 1. 使用 SVG */
.line {
background-image: url('data:image/svg+xml;utf8,');
}
/* 2. 使用 CSS 画线 */
.line {
height: 0.5rem;
background-color: #000;
position: relative;
overflow: hidden;
}
.line::before {
content: "";
position: absolute;
bottom: 0;
left: -50%;
width: 200%;
height: 0.5rem;
border-top: 0.5rem solid #000;
border-radius: 10rem;
transform: rotate(-45deg);
}
/* 3. 使用 clip-path */
.line {
height: 0.5rem;
clip-path: polygon(0% 50%, 30% 100%, 70% 100%, 100% 50%);
background-color: #000;
}

这些方法具有各自的优势和不足。使用 SVG 能够在不降低图像质量的情况下缩放线条，但需要在 HTML 中插入 SVG 代码。使用 CSS 画线方法可以控制线条的粗细和颜色，但需要使用伪元素和 transform 属性来绘制线条。使用 clip-path 方法可以方便地创建不规则形状，但不是所有浏览器都支持。

在实际网站设计中，可以根据需要选择最适合的方法来创建不规则线条，并加以优化。