CSS基礎：經過邊框實現三角形

經過css實現三角形可能會在css基礎面試中碰到，效果以下

首先準備個div

<div class="box1"></div>複製代碼

.box1 {  
    width: 200px;  
    height: 200px;  
    margin: 0 auto;  
    background: black;
}複製代碼

加上邊框

.box1 {  
    width: 200px;  
    height: 200px;  
    margin: 0 auto;  
    background: black;  
    border: 100px solid #87cefa;
}複製代碼

修改一下左右兩邊框的顏色，能夠看到其實邊框的交界處是斜線拼接的

.box1 {  
    width: 200px;  
    height: 200px;  
    margin: 0 auto;  
    background: black;  
    border: 100px solid #87cefa; 
    border-right-color: red;  
    border-left-color: red;
}複製代碼

減少盒子的寬度和高度到0，就能夠看到四個方向上的三角形了

須要哪一個方向的三角，隱藏其餘三個邊框就好

.box1 {  
    width: 0px;  
    height: 0px;  
    margin: 0 auto;  
    border: 100px solid #87cefa; 
    border-right-color: transparent;  
    border-left-color: transparent;  
    border-top-color: transparent;
}複製代碼

另外若是加上圓角屬性，還能獲得扇形

.box1 {  
    width: 0px;  
    height: 0px;  
    margin: 0 auto;  
    border: 100px solid #87cefa; 
    border-right-color: transparent;  
    border-left-color: transparent;  
    border-top-color: transparent;  
    border-radius: 50%;
}複製代碼