程序员在旅途

用这生命中的每一秒，给自己一个不后悔的未来！

0%

基于CSS实现的尖角提示符

发表于 更新于 分类于 Valine：
本文字数： 1.7k 阅读时长 ≈ 2 分钟

一、尖角提示符介绍

　　尖角提示符在项目中经常用到，很多框架也集成了这个功能，比如mui的popover、bootstrap的popwindow，在一般的项目中基本够用，但是，了解实现方法，对于一些项目的特别需求，能够做出更好地效果，更好地满足项目需求，也能进一步提高自己的基础能力。

二、代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>尖角提示符</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.triangle{
				background: bisque;
				position: relative;
			}
			.triangle:before{	/*默认前面显示内容，这里通过top和left改变了位置*/
				content: '';/*content 属性设置在class="triangle"后面的元素显示什么内容，这里要做三角，故为空*/
				width: 0px;/*空*/
				height: 0px;/*空*/
				position: absolute;/*定位需要*/
				top: 100%;/*确定元素的位置: 100%代表从上个div的底部开始*/
				left: 20%;
				/*通过设置边框的宽度，构造出此图形，若是想做成三角，只需要设置其他三个方向的边框颜色为父元素背景色即可*/
				border-bottom: 16px solid red;
				border-left: 16px solid blueviolet;
				border-right: 16px solid royalblue;
				border-top: 16px solid slateblue;
			}			
			.triangle:after{/*后面显示内容*/
				content: '';/*content 属性设置在class="triangle"后面的元素显示什么内容，这里要做三角，故为空*/
				width: 0px;/*空*/
				height: 0px;/*空*/
				position: absolute;/*定位需要*/
				top: 100%;
				left: 50%;
				border-bottom: 16px solid red;
				border-left: 16px solid transparent;/*透明色*/
				border-right: 16px solid transparent;/*透明色*/
			}
		</style>
	</head>
 
	<body>
		<div class="triangle">
			这里下方会显示三角提示符，若是需要提示符跟随div，可以设置div的定位方式为relative
		</div>
	</body>
</html>

三、实现效果

尖角提示示意图

四、总结

　　1，需要了解after以及content的使用;
　　2，对div的width和height要明白代表的是哪一部分的宽高(代表内容的宽高,具体参考这篇博客);
　　3，对border的设置要清楚，上下左右设置不同的颜色，为何会出现那个图形要明白，这里稍微提一点个人看法：当上下border设置width的时候，这个时候再设置左或者右的border的width，这几个border挤一起，就会出现上图左边那个图形(理解的还是透彻，后面理解透彻了再补充)；
　　4，欢迎一起交流。