Question

我尝试为三角形设置黑色实心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;
}

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

Answer 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;
}

Answer 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;
}`

如何将边框设置为三角形

2 个答案: