基于CSS实现的尖角提示符

CSS实现的尖角提示

一、概述

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

二、实现代码

<!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，欢迎一起交流。

基于CSS实现的尖角提示符

猜你喜欢