如何为三角形设置边框答案

【问题标题】：How to set a border to a triangle如何为三角形设置边框
【发布时间】：2014-03-07 21:19:42
【问题描述】：

我尝试为三角形设置一个黑色实心 1px 边框：jsFiddle。我写了以下标记：

<div>
</div>

和样式

div{
    position: absolute;
    left:0px; 
    top:0px;
    width: 0;
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 10px solid red;
}

但我不明白在这种情况下如何设置三角形的边框。

【问题讨论】：

基本上是因为三角形IS是一个边框...你不能给它添加一个border
但我需要一个带边框的三角形。您的意思是 CCS 不可能吗？
您可以使用 before/after 伪元素 - 就像 jsfiddle.net/4ZeCz/1927 但它看起来有点锯齿状..
正如@Paulie_D 所说，您实际上是在使用 css 技巧创建一个三角形，这解释了它是如何制作的 codepen.io/chriscoyier/full/lotjh
CSS triangle custom border color 的可能副本

标签： html css

【解决方案1】：

你也可以试试这个，基本上我做了一个更大的黑色三角形，放在红色的后面

<div id="border">  
</div>

 <div id="red">
 </div>


#red{
    position: absolute;
    left:4px; 
    top:9px;
    width: 0;
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 10px solid red;
    background-color:transparent;
    z-index: 99;
}

#border {
    position: absolute;
    left:0x; 
    top:0px;
    width: 5px;
    height: 10px; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 12px solid black;
    z-index: 0;
}

【讨论】：

【解决方案2】：

这是你的解决方案

`div:before {
    border-bottom: 12px solid #000000;
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
    content: "";
    height: 0;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 0;
}

div:after {
    border-bottom: 10px solid #FF0000;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 111111;
}`

【讨论】：