Question

所以，我创建了一个三角形，使用纯CSS指向背景颜色＃222。我想为那个三角形添加一个红色的1px边框，但我不知道如何。

.arrow-tip {
    width: 0; height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #222;
}

Answer 1

你可以做这样的事情的唯一方法是创建另一个箭头，然后将它放在第一个之后，像这样伪造边框：

.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>

你必须使用尺寸，直到你恰到好处。

Answer 2

您可以使用:before和:after sudo选择器来创建箭头形状。

＆＃13;

.arrow-tip { 
    position: relative;
    margin-top: 100px;
}
.arrow-tip:after,
.arrow-tip:before { 
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow-tip:after { 
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #222;
    border-width: 15px;
    margin-left: -15px;
}
.arrow-tip:before {
    bottom: -1px;
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: red;
    border-width: 17px;
    margin-left: -17px
}

＆＃13;

<div class="arrow-tip"></div>

＆＃13;

JsFiddle示例：http://jsfiddle.net/tud0czmq/1/

使用纯CSS为三角形添加边框

2 个答案: