html - 带有白色边框的三角形

如何使用css创建带白色边框的三角形？如下图所示。
当我添加这个css时

.triangle {
    width:0;
    height:0;
    border-top: 20px solid transparent;
    border-left: 20px solid white;
    border-bottom: 20px solid transparent;
    position:relative;

}
.triangle:before {
    content:'';
    width:0;
    height:0;
    border-top: 10px solid transparent;
    border-left: 10px solid red;
    border-bottom: 10px solid transparent;
    position:absolute;
    top:-10px;
    left:-17px;
}

结果是

最佳答案

CSS：

.triangle {
    width:0;
    height:0;
    border-top: 20px solid transparent;
    border-left: 20px solid white;
    border-bottom: 20px solid transparent;
    position:relative;

}
.triangle:before {
    content:'';
    width:0;
    height:0;
    border-top: 10px solid transparent;
    border-left: 10px solid red;
    border-bottom: 10px solid transparent;
    position:absolute;
    top:-10px;
    left:-17px;
}

HTML：

<div class="triangle"></div>

（AA）

关于html - 带有白色边框的三角形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14909212/