css 如何给三角形 加边框

CSS中，我们可以使用伪元素::before和::after配合transform来创建三角形。比如：

.triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 0 20px 30px;
        border-color: transparent transparent transparent #333;
        position: relative;
}
.triangle::before {
        content: "";
        position: absolute;
        top: -20px;
        right: -30px;
        border-style: solid;
        border-width: 20px 0 20px 30px;
        border-color: #333 transparent transparent transparent;
        transform: rotate(180deg);
}

上面的代码可以创建一个指向右下方的三角形，并使用border-color设置边框颜色。但是，如果直接给三角形加边框，则会发现边框并不完整，会有缺口，因为三角形的边缘并不是一个标准的方形。此时，我们可以使用外层容器和内层容器的组合来实现三角形的边框：

.triangle-container {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid #333;
}
.triangle-inner {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 20px 0 20px 30px;
        border-color: transparent transparent transparent #333;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}
.triangle-inner::before {
        content: "";
        position: absolute;
        top: -20px;
        right: -30px;
        border-style: solid;
        border-width: 20px 0 20px 30px;
        border-color: #333 transparent transparent transparent;
        transform: rotate(180deg);
}
    

这里我们使用了一个容器.triangle-container来设置边框，并在其中添加一个内层容器.triangle-inner来实现三角形的效果。由于内层容器的位置是absolute定位，因此可以使用transform来调整其位置，使其位于外层容器的中央。同时，在内层容器上添加伪元素来实现三角形的效果，并使用border-color设置边框颜色即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！