css实现气泡的小尖角效果
发布时间:2020-04-10 17:32:31 作者:喆喆 我要评论
本文通过实例代码给大家介绍了css实现气泡的小尖角效果,代码简单易懂对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
效果图(边框颜色太淡,放在{}里面):
{ }
参考链接 纯CSS气泡效果
需要用到的知识点:
当div的宽度和高度都是0时,整个边框是由四个三角形组成的,每一边为一个三角形,利用这点,来做小尖角,比如如下:
把不需要的三边的边框的颜色设置为与背景相同,这样就得到想要的小尖角,然后再利用定位调整一下位置就可以了。
上面的方法可以得到一个带有颜色的小尖角,但是效果图是显示带有边框的小金角。所以在已有的基础上,出现两个小尖角,然后进行叠加,利用z-index属性来显示。因为需要两个,可以利用伪元素,这样就不会出现无语义化的元素,代码如下:
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 | &::before { content : "" ; display : block ; width : 0 ; height : 0 ; border : solid 10px ; border-color : #E9E9E9 rgba( 255 , 255 , 255 , 0 ) rgba( 255 , 255 , 255 , 0 ) rgba( 255 , 255 , 255 , 0 ); position : absolute ; top : 208px ; left : 40px ; z-index : 2 ; } &::after { content : "" ; display : block ; width : 0 ; height : 0 ; border : solid 8px ; border-color : #fff rgba( 255 , 255 , 255 , 0 ) rgba( 255 , 255 , 255 , 0 ) rgba( 255 , 255 , 255 , 0 ); position : absolute ; top : 207px ; left : 41.5px ; z-index : 3 ; } |
总结
到此这篇关于css实现气泡的小尖角效果的文章就介绍到这了,更多相关css气泡小尖角内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
- 经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊!2014-04-04
最新评论