如何使用具有边框的CSS制作形状？

Question

我正在寻找一种仅使用HTML / CSS制作各种几何形状的方法。我找到了答案here，但它不允许我给我的形状边框。例如，我可以使用

获得倒三角形三角形

#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

它给了我这个输出：

但是，现在我不能像这样在三角形上添加边框：

有没有办法可以实现我想要的？此外，是否可以正确地给它效果（如阴影效果等）

注意：我的限制是只能使用内联CSS

Answer 1

嗯，这有点乱，但如果三角形不是动态的，这应该有效。我们的想法是使用：在伪元素之前，在现有的三角形下放置另一个具有适当大小和边框的绝对定位三角形。

像这样http://jsfiddle.net/84zQL/

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;   
    position:relative;
}

#triangle-down:before{
    content:"";
    position:absolute;
    top:-103px;
    left:-55px;
    width: 0;
    height: 0;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    border-top: 110px solid blue;
    z-index:-1;
}

Answer 2

this post的潜在重复。要实现边界技巧，您可能需要对齐两个不同大小的三角形，即内部的三角形以较小的边框为中心。

使用两个三角形的内联示例：

<div style="
    width: 0;
    height: 0;
    border-bottom: 110px solid blue;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;">
    <div style="
        width: 0;
        height: 0;
        position: absolute;
        top: 6px;
        left: 9px;
        border-bottom: 99px solid pink;
        border-left: 61px solid transparent;
        border-right: 61px solid transparent;">
     <div/>
<div/>

演示：http://jsfiddle.net/haf9E/1/
如果你想制作阴影，根据阴影的类型（插入或开始）添加具有不同不透明度或模糊的叠加三角形，根据或不同。

Answer 3

davidwalsh.name/css-triangles

非常好的文章，完全回答了你的问题。

Answer 4

我尝试通过在三角形外添加div来尝试一些事情。

.triangle {
width: 0px;

}

this post