css 画出一个三角形

css三角形

 

页面标签内容：（四个块元素）
            <div class="item item1">
                i1
            </div>
            <div class="item item2">
                i2
            </div>
            <div class="item item3">
                i3
            </div>
            <div class="item item4">
                i4
            </div>

css样式内容
            .item{                   //统一设置宽高为0，边框为透明边框
                width: 0;
                height: 0;
                border: 50px solid transparent;

                margin-right: 10px;
                border-color: rgba(0, 0, 0, .5);
                
            }
            .item1{        //第一个三角形 
                border-top: 50px solid blue;
            }
            .item2{        //第二个三角形 
                border-bottom: 50px solid red;
            }
            .item3{        //第三个三角形 
                border-left: 50px solid green;
            }
            .item4{        //第四个三角形 
                border-right: 50px solid black;
            }                             

上面的代码放入页面后的大致样式：

 

后面就可以根据自己的需要，调整对应的三角形位置