纯CSS 实心三角形 + 实心矩形 气泡对话框
我们先说一下这个实心三角形 + 实心矩形气泡对话框的实现的思路：
①设置矩形，填充背景色 ；
②添加伪元素before，绘制三角形箭头 ；
③调整三角形箭头与矩形的位置，使两者结合在一起
一、绘制矩形对话框
在绘制如上图这样一个带实心三角形的气泡对话框之前，我们先绘制一个矩形，并将这个矩形背景填充上颜色，使它成为一个实心的矩形。
代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 带等边三角形的气泡对话框</title>
<style>
.one {
width: 200px;
height: 100px;
line-height: 100px; /*文字垂直居中*/
margin: 0 auto;
text-align: center; /*文字水平居中*/
border-radius: 10px; /*设置矩形四个角为圆角*/
background-color: #A7A7DB;
}
</style>
</head>
<body>
<div class="one">三角形在底部的对话框</div>
</body>
</html>
|
二、绘制三角形箭头
然后我们绘制该气泡对话框的箭头三角形
如何绘制三角形详情可以点击此处查看
①我们给矩形添加一个伪元素，在这个伪元素中绘制三角形；
②由于此次我们绘制的三角形箭头在矩形框底部，所以我们保留的是矩形顶部的边
CSS代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* 添加伪元素，在这里添加三角形 */
.one:before {
/*伪元素必须添加content*/
content: "";
width: 0;
height: 0;
/*IE6下，height:0;不顶用，可使用font-size:0; + overflow:hidden;修复此问题*/
font-size:0;
overflow:hidden;
display: block;
border-width: 15px;
border-color: #A7A7DB transparent transparent transparent;
/*为了兼容IE6，所有设置为透明（transparent）的边，需要设置为dashed；有颜色的边设置为solid*/
border-style: solid dashed dashed dashed;
}
|
三、调整三角形箭头的位置
我们通过CSS定位（position）来移动三角形箭头位置，将三角形移到矩形框的底部。可以运用子绝父相的原理来进行定位。
①在三角形的父元素中添加相对定位；
②在伪元素中添加绝对定位
CSS代码如下：
1 2 3 4 5 6 7 8 9 |
.one {
position: relative; /*子绝父相*/
}
.one:before {
position: absolute; /*绝对定位不占位置*/
top: 100px; /* 向下移动 矩形的高度 + 矩形的上下内边距 + 下边框粗细*/
left: 20%; /*相对于矩形宽度的位置*/
}
|
四、修改颜色
最后，我们只需要将三角形箭头的颜色修改为矩形框的背景色就可以啦~
下面附上完整代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS 实心三角形 + 实心矩形 气泡对话框</title>
<style>
/* 1.实心矩形 */
.one {
width: 200px;
height: 100px;
line-height: 100px;
margin: 0 auto;
text-align: center;
border-radius: 10px;
background-color: #A7A7DB;
position: relative; /*子绝父相*/
}
/* 2.添加伪元素，在这里添加三角形 */
.one:before {
/*伪元素必须添加content*/
content: "";
width: 0;
height: 0;
/*IE6下，height:0;不顶用，可使用font-size:0; + overflow:hidden;修复此问题*/
font-size:0;
overflow:hidden;
display: block;
border-width: 15px;
border-color: #A7A7DB transparent transparent transparent;
/*为了兼容IE6，所有设置为透明（transparent）的边，需要设置为dashed；有颜色的边设置为solid*/
border-style: solid dashed dashed dashed;
position: absolute; /*绝对定位不占位置*/
top: 100px; /* 向下移动 矩形的高度 + 矩形的上下内边距 + 下边框粗细*/
left: 20%; /*相对于矩形宽度的位置*/
}
</head>
<body>
<div class="one">三角形在底部的对话框</div>
</body>
</html>
|
转自https://timor419.github.io/2018/09/09/dialog1/