铁雪资源网 Design By www.gsvan.com
效果图(边框颜色太淡,放在{}里面):
{ }
参考链接 纯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气泡小尖角,css,小尖角
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无css实现气泡的小尖角效果的评论...