Css:after伪元素【简单】写对话框箭头

最新推荐文章于 2024-06-28 09:43:34 发布

ღ故里᭄ꦿ࿐

最新推荐文章于 2024-06-28 09:43:34 发布

阅读量5k

点赞数 5

分类专栏：三大基础功能实现文章标签： css html 对话框箭头

本文链接：https://blog.csdn.net/Hunt_bo/article/details/81414865

版权

三大基础同时被 2 个专栏收录

26 篇文章 4 订阅

订阅专栏

功能实现

21 篇文章 0 订阅

订阅专栏

第一次写对话框的箭头时，也是一头雾水，不知道怎么去写，后来去学习了一下别人怎么写的，也曾经试过去用别人的代码，但是去修改箭头长度和宽度的时候总是很难，然后就自己去研究，发现了一种全新的写法，自我感觉还是挺简单的，最重要的是这样写可以去控制箭头的长短和宽度，这样在其他地方用的时候，也更加容易修改。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>after</title>
	<style type="text/css">
		.aa{
			width:100px;
			height: 100px;
			position: fixed;
			left: 50%;
			top: 50%;
			margin-top: -50px;
			margin-left: -50px;
			background-color: pink;
		}
		.aa:after{
			content: "";
		    border-top: solid 20px pink;
		    border-left: solid 10px #00800000;
		    border-right: solid 10px #00800000;
		    border-bottom: solid 0px #00800000;
		    position: absolute;
		    left: 25%;
		    top: 100%;
		}
	</style>
</head>
<body>
	<div class="aa"></div>
</body>
</html>

先是一个随意的 DIV ，可以根据自己的需要加在自己想样用到的地方，然后通过他的伪类：after添加content,三角形的形状是通过它的四个方向的边框去实现的，其中三个方向的边框设置颜色为透明。

例如我这个是向下的箭头，可以通过border-left和border-right的宽度来改变箭头的宽度，左右两个边框的宽度差可以去控制箭头的偏向，向下的箭头，就设置boorder-bottom的宽度为0，通过border-top的边框宽度去改变箭头的长短。最后通过定位把它放在DIV的下面就行了。

下面是效果图：