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

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

然而，我想将其设置为内部为白色，并且三角形周围只有一个边框，而不是纯色。 （因此三角形将是多种颜色的，内部是一种颜色，边框是不同颜色的）。

这可能吗？如果可以，该怎么做？

要仅使用 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/ http://jsfiddle.net/jasper/qnmpb/1/

Update

然后，您可以将两个三角形 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/ http://jsfiddle.net/jasper/qnmpb/3/

编辑（2014）：

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