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

最新推荐文章于 2022-09-27 16:48:54 发布

IT 哈

最新推荐文章于 2022-09-27 16:48:54 发布

阅读量1.5k

点赞数

分类专栏： css

原文链接：https://timor419.github.io/2018/09/09/dialog1/

版权

css 专栏收录该内容

93 篇文章 2 订阅

订阅专栏

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

我们先说一下这个实心三角形 + 实心矩形气泡对话框的实现的思路：

①设置矩形，填充背景色；

②添加伪元素before，绘制三角形箭头；

③调整三角形箭头与矩形的位置，使两者结合在一起

一、绘制矩形对话框

在绘制如上图这样一个带实心三角形的气泡对话框之前，我们先绘制一个矩形，并将这个矩形背景填充上颜色，使它成为一个实心的矩形。

代码如下：

<!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代码如下：

/* 添加伪元素，在这里添加三角形 */
 .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代码如下：

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

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

四、修改颜色

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

下面附上完整代码：

<!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/

IT 哈

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
纯CSS 实心三角形 + 实心矩形气泡对话框

纯CSS 实心三角形 + 实心矩形气泡对话框我们先说一下这个实心三角形 + 实心矩形气泡对话框的实现的思路：①设置矩形，填充背景色；②添加伪元素before，绘制三角形箭头；③调整三角形箭头与矩形的位置，使两者结合在一起一、绘制矩形对话框在绘制如上图这样一个带实心三角形的气泡对话框之前，我们先绘制一个矩形，并将这个矩形背景填充上颜色，使它成为一个实心...
复制链接

扫一扫