主要利用border特性来绘制
三角形:
.kkk {
width: 0;
height: 0;
border: 50px solid;
border-color: yellow blue pink black;
}
<div class="kkk"></div>
扇形:
.kkk {
width: 0;
height: 0;
border: 50px solid;
border-color: yellow blue pink black;
border-radius: 50%;
}
<div class="kkk"></div>
实现气泡框:
.kkk {
width: 200px;
height: 100px;
background-color: yellow;
position: relative;
margin-top: 20px;
text-align: center;
line-height: 100px;
color: brown;
}
.kkk::before {
content: '';
width: 0;
height: 0;
border: 30px solid;
border-color: yellow transparent transparent;
position: absolute;
top: 100px;
left: 100px;
}
<div class="kkk">这是一个气泡框</div>