html - 如何给三 Angular 形设置边框

Question

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

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

Answer 1

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

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