如何制作一个白色中心的纯css三角形

Question

我想用css创建一个向上和向下的箭头,如下所示:http://apps.eky.hk/css-triangle-generator/

然而,我想要设置它,而不是纯色,所以内部是白色的,三角形周围只有一个边框.(因此三角形将是多色的,内部一种颜色和不同颜色的边框).

这是可能的,如果是的话,怎么办呢？

Answer 1

要创建仅使用CSS的三角形,我们使用带边框的零宽度/高度元素:

.arrow-up {
    width  : 0;
    height : 0;

    border-left   : 50px solid transparent;
    border-right  : 50px solid transparent;
    border-bottom : 50px solid black;
}

由于我们使用边框来创建箭头,我们不能只给它一个边框,但我们可以在一个略大的箭头上叠加一个箭头以显示边框:

HTML -

<div class="top"></div>
<div class="bottom"></div>?

CSS -

.top {
    position : absolute;
    top      : 6px;
    left     : 10px;
    width    : 0;
    height   : 0;
    z-index  : 100;

    border-left   : 50px solid transparent;
    border-right  : 50px solid transparent;
    border-bottom : 50px solid black;
}
.bottom {
    position : absolute;
    width    : 0;
    height   : 0;
    z-index  : 99;

    border-left   : 60px solid transparent;
    border-right  : 60px solid transparent;
    border-bottom : 60px solid red;
}?

这是一个演示:http://jsfiddle.net/jasper/qnmpb/1/

更新

然后,您可以将两个三角形DIV元素放在容器中,然后根据需要移动该容器:

HTML -

<div id="container">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

CSS -

#container {
    position : relative;
    top      : 25px;
    left     : 25px;
}

这是一个演示:http://jsfiddle.net/jasper/qnmpb/3/

编辑(2014):

我刚回到这个答案,并注意到创建双三角形不需要单独的HTML元素.你可以使用伪元素,:before和:after.即.top用类似的东西替换选择器和类似.my-element-that-needs-a-triangle:before的.bottom选择器.my-element-that-needs-a-triangle:after.