很实用,先收藏着
第一步：新建一个div。
<div class="triangle">添加三角形</div>
.triangle {
width: 200px;
height: 40px;
position: absolute;
background: #2b2b2b;
color: #fff;
}
第二步：为盒子添加样式。
1.向上
.triangle:before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 0;
height: 0;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid #2b2b2b;
}
2.向下
.triangle:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
width: 0;
height: 0;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-top: 20px solid #2b2b2b;
}
3.向左
.triangle:before {
content: "";
position: absolute;
left: -20px;
right: 0;
top: 0;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #2b2b2b;
}
4.向右
content: "";
position: absolute;
right: -20px;
top: 0;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #2b2b2b;
