web前端纯css制作三角形
做法:
- 创建一个div
- 分别写出四个边的border(要设置 box-sizing=“border-box”)
- 给其他三个边设置透明度为0
1.先创建一个div 分别设置4个边的border
<div class="app"></div>
.app{
width:300px;
height:100px;
border-top:70px solid red;
border-right:150px solid green;
border-left:150px solid blue;
border-bottom:50px solid black;
box-sizing: border-box;
}
2.设置其他三个边的border透明度为0
<div class="app"></div>
.app{
width:300px;
height:100px;
border-top:70px solid red;
border-right:150px solid rgba(0,0,0,0);
border-left:150px solid rgba(0,0,0,0);
border-bottom:50px solid rgba(0,0,0,0);
box-sizing: border-box;
}
3.最终效果