使用:before和:after伪类实现小三角
实现过程
1.定义一个div,设置宽高,边框,创建一个矩形框。
<div class="div1"></div>
<style type="text/css">
.div1 {
width: 300px;
height: 35px;
margin: 0 auto;
margin-top: 35px;
position: relative;
border: 2px solid;
border-radius:4px;
}
</style>
2.通过伪类:before在矩形框前面(左侧)添加一个小三角。
.div1::before {
content: "";
width: 0;
height: 0;
border: 10px solid;
position: absolute;
top: 10px;
left: -20px;
border-color: transparent #000 transparent transparent;
}
3.通过伪类:after在矩形框后边(右侧)添加一个红色小三角
.div1::after {
content: "";
width: 0;
height: 0;
border: 8px solid;
position: absolute;
top: 12px;
left: 0px;
border-color: transparent yellow transparent transparent;
}
4.调整.div1::after中红色小三角的位置,使当前红色小三角覆盖第一个小三角,此处修改为top:12px;left:-16px;效果如下
.div1::after {
content: "";
width: 0;
height: 0;
border: 8px solid;
position: absolute;
top: 12px;
left: -16px;
border-color: transparent red transparent transparent;
}
5.将第二个小三角的边框颜色设置为div的背景颜色白色,即 border-color: transparent #fff transparent transparent;,一个会话气泡就完成了。如图所示
6.完整代码
<!DOCTYPE html>
<html>
<head>
<style>
body {
background:#fff;
}
.div1 {
width: 300px;
height: 35px;
margin: 0 auto;
margin-top: 35px;
position: relative;
border: 2px solid;
border-radius:4px;
}
.div1::before {
content: "";
width: 0;
height: 0;
border: 10px solid;
position: absolute;
top: 10px;
left: -20px;
border-color: transparent #000 transparent transparent;
}
.div1::after {
content: "";
width: 0;
height: 0;
border: 8px solid;
position: absolute;
top: 12px;
left: -16px;
border-color: transparent #fff transparent transparent;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>