当前位置：首页>前端>正文

HTML5实现简单聊天界面demo html 聊天框

前端2024-04-20 00:17:35

实现带三角形的聊天框

相信很多小伙伴都会经常碰到以下的聊天框

HTML5实现简单聊天界面demo html 聊天框,HTML5实现简单聊天界面demo html 聊天框_css,第1张

那么我们要如何实现呢？

首先，我们要会先实现一个小三角形；

思路：利用元素的 border 属性，将其三个方向的 border-color 值设为透明色（或者和其父元素的背景色一致，形成视觉差，俗称障眼法），剩下一个方向的 border-color 的值即为你需求的三角形的颜色。

效果图如下：

HTML5实现简单聊天界面demo html 聊天框,HTML5实现简单聊天界面demo html 聊天框_HTML5实现简单聊天界面demo_02,第2张

代码如下：

<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;
}

三角形的位置可以自行调整伪类 before 中的样式border的color设置以及相关的定位值top、right、left、bottom；

HTML5实现简单聊天界面demo html 聊天框,HTML5实现简单聊天界面demo html 聊天框_css_03,第3张