实现原理
可以把该对话框拆解为带圆角的普通矩形+三角形, 三角形可以借助border属性实现, 其中三角形占位可以借助CSS3的before、after伪元素实现.
1.1 不带边框的对话框
// html
<div class="bubble"></div>
// css
.bubble {
width: 300px;
height: 100px;
border-radius: 10px;
background-color: aquamarine;
position: relative;
margin-left: 20px;
}
.bubble::before {
position: absolute;
top: 40px;
left: -20px;
content: '';
width: 0;
height: 0;
border-right: 10px solid aquamarine;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
}
先看看实现效果:
很多时候, 设计师期望的是带边框、背景为白色的, 那么我们接着往下看~
1.2 带边框的对话框
实现原理:将2个三角形叠加、before的三角形边框颜色和外面框的保持一致, after的三角形边框设置成白色即可.
// html
<div class="bubble-border"></div>
// css
.bubble-border {
width: 300px;
height: 100px;
border-radius: 10px;
background-color: #ffffff;
border: 1px solid red;
position: relative;
margin-left: 20px;
}
.bubble-border::before,
.bubble-border::after {
position: absolute;
top: 40px;
left: -20px;
content: '';
width: 0;
height: 0;
border-right: 10px solid red;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
}
.bubble-border::after {
left: -19px;
border-right: 10px solid #ffffff;
}
再来看看实现效果叭