畫出來是由四個三角形組成的四邊形
四個三角形相交的點到各邊的垂線就是border設定的寬度
想要什麼樣的三角形就看數學了
<div id="test">
<div id="triangle1"></div>
<div id="triangle2"></div>
</div>
#test{
position: relative;
}
#triangle1 {
position: absolute;
top: 0;
left:0px;
width: 0;
height: 0;
border-left: 5px solid #03A6EA;
border-right: 5px solid #03A6EA;
border-top: 20px solid red;
border-bottom: 20px solid yellow;
}
#triangle2 {
position: absolute;
top: 0;
left:10px;
width: 0;
height: 0;
border-left: 20px solid #03A6EA;
border-right: 20px solid #03A6EA;
border-top: 20px solid red;
border-bottom: 20px solid yellow;
}