css实现聊天对话框的小三角样式（从实现原理上理解）

最新推荐文章于 2023-06-08 16:52:44 发布

AshleyXM

最新推荐文章于 2023-06-08 16:52:44 发布

阅读量3.2k

点赞数 4

本文链接：https://blog.csdn.net/AshleyXM/article/details/115346265

版权

CSS三角形 border属性对话框指示器伪元素:before CSS布局

关键词由CSDN通过智能技术生成

ps：本人初次研究，仅记录个人学习经验，如果错误还请多多指教！
最近才仔细研究对话框的小三角如何实现，先来了解一下相关的知识—border属性：
先看代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				border-top: 25px solid blue;
				border-bottom: 25px solid red;
				border-left: 25px solid yellow;
				border-right: 25px solid skyblue;
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果如图：
在这里插入图片描述
可以看出来，四边的border都是梯形（我以前一直以为是长方形o(╥﹏╥)o），所以这时候把div的width和height都设置为0，那么就可以得到四个三角形的border：

<style type="text/css">
			div {
				width: 0px;
				height: 0px;
				border-top: 25px solid blue;
				border-bottom: 25px solid red;
				border-left: 25px solid yellow;
				border-right: 25px solid skyblue;
				background-color: gray;
			}
		</style>

在这里插入图片描述
如果不设置其中一边的border的话，比如这样：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 0px;
				height: 0px;
				border-top: 25px solid red;
				border-bottom: 25px solid yellow;
				border-right: 25px solid skyblue;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果图：
在这里插入图片描述
以此类推，还可以只设置两边的border，不够这两条边必须相邻，不然会显示不出来！
然后，可以根据需要，只设置你想要的那个三角形，其他的设置为透明的即可！
比如只要最右边的三角形：

<style type="text/css">
			div {
				width: 0px;
				height: 0px;
				border-top: 25px solid transparent;
				border-bottom: 25px solid transparent;
				border-left: 25px solid transparent;
				border-right: 25px solid skyblue;
			}
		</style>

在这里插入图片描述
最后直接实现一个带有小三角的对话框：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height:100px;
				border-radius: 5px;
				background-color: #ccc;
				position: relative;
				margin: 0 auto;
			}
			div:before{
				width: 0px;
				height: 0px;
				content: "";
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				border-right: 10px solid #ccc;
				position: absolute;
				top: 40px;
				left: -10px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

注意：以上代码千万不要忘记写【content:"";】，不然就显示不出来！
效果图：
在这里插入图片描述
还可以根据需要调节小三角的形状：

<style type="text/css">
			div {
				width: 200px;
				height:100px;
				border-radius: 5px;
				background-color: #ccc;
				position: relative;
				margin: 0 auto;
			}
			div:before{
				width: 0px;
				height: 0px;
				content: "";
				border-top: 30px solid transparent;
				border-bottom: 5px solid transparent;
				border-right: 20px solid #ccc;
				position: absolute;
				top: 30px;
				left: -10px;
			}
		</style>

效果图：
在这里插入图片描述

AshleyXM

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css实现聊天对话框的小三角样式（从实现原理上理解）

ps：本人初次研究，仅记录个人学习经验，如果错误还请多多指教！最近才仔细研究对话框的小三角如何实现，先来了解一下相关的知识：先看代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { width: 200px; height: 200px
复制链接

扫一扫