使用css3绘制三角形（上下左右）

第一步：新建div盒子 <div class="sanjiaoxing"></div> 第二步：为盒子添加CSS样式。上三角形 .sanjiaoxing{width:0; height:0;border-right:50px solid transparent;borde...

第一步：新建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;
}

发表于 2020-06-25 20:50
阅读 ( 606 )
分类：web前端开发

使用css3绘制三角形（上下左右）

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »