1.通过设定边框来实现
<div class="demo"></div>
.demo {
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 50px solid black;
margin: 0 auto;
/* border-bottom: 50px solid black; */
/* border-left: 100px solid black; */
/* border-left: 50px solid red;
border-bottom: 50px solid red; */
}
通过设置边框透明,三角形的颜色可以得到不同方向的,不同颜色的三角形.对应得到如下效果:
2.利用伪元素
<div class="demo"></div>
.demo {
margin: 100px auto;
width: 200px;
height: 100px;
border: 1px solid black;
position: relative;
border-radius:5px;
}
.demo::after {
content: "";
position: absolute;
left: -20px;
top: 12px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid #fff;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.demo::before {
content: "";
position: absolute;
left: -22px;
top: 11px;
width: 0;
height: 0;
border-top: 11px solid transparent;
border-right: 11px solid #000;
border-left: 11px solid transparent;
border-bottom: 11px solid transparent;
}
效果如下: