css实现气泡的小尖角效果

庸亻自扰D 11 0 PDF 2020-11-26 14:11:49

效果图(边框颜色太淡,放在{}里面): { } 参考链接 纯CSS气泡效果 需要用到的知识点: 当div的宽度和高度都是0时,整个边框是由四个三角形组成的,每一边为一个三角形,利用这点,来做小尖角,比如如下: 把不需要的三边的边框的颜色设置为与背景相同,这样就得到想要的小尖角,然后再利用定位调整一下位置就可以了。 上面的方法可以得到一个带有颜色的小尖角,但是效果图是显示带有边框的小金角。所以在已有的基础上,出现两个小尖角,然后进行叠加,利用z-index属性来显示。因为需要两个,可以利用伪元素,这样就不会出现无语义化的元素,代码如下: &::before { content:

用户评论
请输入评论内容
评分:
暂无评论