使用css3绘制三角形(上下左右)

第一步:新建div盒子

<div class="sanjiaoxing"></div>

第二步:为盒子添加CSS样式。

上三角形

.sanjiaoxing{
width:0;
    height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid red;
}

下三角形

.sanjiaoxing{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-top:50px solid red;
}

左三角形

.sanjiaoxing{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-right:50px solid red;
}

右三角形

.sanjiaoxing{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-left:50px solid red;
}

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/267.html