前端必会的 HTML+CSS 常用技巧之如何利用CSS实现带三角形的聊天框

zhuangv

已于 2022-09-25 21:05:32 修改

阅读量1.8k

点赞数 5

分类专栏： HTML + CSS 文章标签： css 定位 html 前端

于 2020-04-12 22:10:27 首次发布

本文链接：https://blog.csdn.net/Zhuangvi/article/details/105477074

版权

HTML + CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

实现带三角形的聊天框

相信很多小伙伴都会经常碰到以下的聊天框
带三角形的聊天框
那么我们要如何实现呢？
首先，我们要会先实现一个小三角形；
思路：利用元素的 border 属性，将其三个方向的 border-color 值设为透明色（或者和其父元素的背景色一致，形成视觉差，俗称障眼法），剩下一个方向的 border-color 的值即为你需求的三角形的颜色。
效果图如下：
代码如下：

    <style>
        *{padding: 0; margin: 0;}
        div{
            width: 300px;
            height: 300px;
            background: pink;
            margin: 50px auto;
        }      
        p{
            width: 0;
            height: 0;
            border: 50px solid;
            border-color: transparent transparent black transparent;
            /* 或者将 transparent 透明色换成与父元素相同的背景色 pink  */
            /* border-color: pink pink black pink; */
        }
    </style>

    <div>
        <p></p>
    </div>

好的，能实现一个小三角形了，那么就拓展此方法实现带三角形的聊天框。

具体实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 300px;
            height: 200px;
            margin: 100px auto;
            background: #ccc;
            /* 设置宽高 ，先利用 border 实现一个四方形 */
            border: 1px solid black;
            border-radius: 5px;
            position: relative;
        }
        span{
            display: block;
            width: 0px;
            height: 0px;
            border:20px solid;
            /* 设置宽高为 0 ，利用 border 实现一个小三角形 */
            /* 并且设置一个方向的 border-color 与父元素的边框颜色一致 */
            border-color: transparent black  transparent transparent;
            /* 利用定位 */
            position: absolute;
            left: -40px;top:20px;
        }
        em{
            display: block;
            width: 0px;
            height: 0px;
            border: 20px solid;
            /* 设置宽高为 0 ，利用 border 实现一个小三角形 */
            /* 并且设置一个方向的 border-color 与父元素的背景色一致 */
            border-color: transparent #ccc transparent transparent;
            /* 利用定位 */
            position: absolute;
            left: -39px;top: 20px;
        }
    </style>
</head>
<body>
    <div>
        <span></span>
        <em></em>
    </div>
</body>
</html>

代码剖析：父元素里面包含两个子元素，两个子元素同时利用border属性，设置border-color三个方向为透明色，其中一个子元素只留一个方向的边框颜色和父元素设置的边框颜色一样，另外一个子元素也只留一个方向的边框颜色和父元素背景颜色一样；然后利用定位属性把两个子元素层叠在一起，并且使两个子元素左右或者上下相差一个像素（根据实际情况看三角形出现在哪个方向），露出下面的三角形边框，形成视觉差，从而实现带三角形的聊天框。

利用伪类选择器 + 定位

.triangle {
	z-index: 999999;
	width: 160px;
	height: 120px;
	/* 这个定位内的样式我是为了页面居中，好截图-开始 */
	position: absolute; /* 正常看你的需求是否要绝对定位还是相对定位 */
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	/* 这个定位我是为了页面居中，好截图-结束 */
	padding: 15px 0 15rpx 20rpx;
	background: rgba(0, 0, 0, 0.75);
	border-radius: 8px;
}
.triangle::before {
	content: ' ';
	position: absolute;
	border: 8px solid transparent;
	width: 0;
	height: 0;
	/* 三角形箭头在上 */
	/* border-bottom-color: rgba(0, 0, 0, 0.75);
	right: 12px;
	top: -16px; */
	
	/* 三角形箭头在右 */
	/* border-left-color: rgba(0, 0, 0, 0.75);
	right: -16px;
	top: 12px; */
	
	/* 三角形箭头在左 */
	/* border-right-color: rgba(0, 0, 0, 0.75);
	left: -16px;
	top: 12px; */
	
	/* 三角形箭头在下 */
	border-top-color: rgba(0, 0, 0, 0.75);
	right: 12px;
	bottom: -16px;
}