您的位置: 首页  >  文章  >  纯CSS 实心三角形 + 实心矩形 气泡对话框

纯CSS 实心三角形 + 实心矩形 气泡对话框

分类: 文章 • 2024-10-11 17:35:04

纯CSS 实心三角形 + 实心矩形 气泡对话框

 

纯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 实心三角形 + 实心矩形 气泡对话框

二、绘制三角形箭头

然后我们绘制该气泡对话框的箭头三角形

如何绘制三角形详情可以点击此处查看

①我们给矩形添加一个伪元素，在这个伪元素中绘制三角形；

②由于此次我们绘制的三角形箭头在矩形框底部，所以我们保留的是矩形顶部的边

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 实心三角形 + 实心矩形 气泡对话框

三、调整三角形箭头的位置

我们通过CSS定位（position）来移动三角形箭头位置，将三角形移到矩形框的底部。可以运用子绝父相的原理来进行定位。

①在三角形的父元素中添加相对定位；

②在伪元素中添加绝对定位

CSS代码如下：

1
2
3
4
5
6
7
8
9

.one {
    position: relative;  /*子绝父相*/
}

.one:before {
    position: absolute; /*绝对定位不占位置*/
    top: 100px; /* 向下移动 矩形的高度 + 矩形的上下内边距 + 下边框粗细*/
    left: 20%;  /*相对于矩形宽度的位置*/
}

纯CSS 实心三角形 + 实心矩形 气泡对话框

四、修改颜色

最后，我们只需要将三角形箭头的颜色修改为矩形框的背景色就可以啦~

下面附上完整代码：

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>

纯CSS 实心三角形 + 实心矩形 气泡对话框

转自https://timor419.github.io/2018/09/09/dialog1/ 

 

相关推荐