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