因此，我使用纯 CSS 创建了一个指向上方且背景色为 #222 的三角形。
我想给那个三角形添加一个红色的 1px 边框，但我不知道怎么做。
.arrow-tip {
width: 0; height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #222;
}
执行此类操作的唯一方法是创建另一个类似的箭头，并将其放在第一个箭头后面以伪造边框，如下所示：
.arrow-tip {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #222;
position: relative;
}
.arrow-tip:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
bottom: -16px;
left: -17px;
z-index: -1;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
border-bottom: 17px solid red;
}
<div class="arrow-tip"></div>
您必须调整尺寸，直到找到合适的尺寸为止。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
