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