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