使用纯CSS向三角形添加边框 [英] Add a border to a triangle using pure CSS

问题描述

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

So, i've created a triangle that points up with a background color of#222 using pure CSS. I want to add a red 1px border to that triangle, but I have no idea how.

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

推荐答案

像这样的是创建另一个箭头就像它，并把它放在第一个伪造边框像这样：

The only way you could do something like this is to create another arrow just like it and put it behind the first to fake the border like this:

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

你必须使用尺寸，直到你得到它。

You'll have to play with the dimensions until you get it just right.

这篇关于使用纯CSS向三角形添加边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！