极乐门资源网 Design By www.ioogu.com

效果图(边框颜色太淡,放在{}里面):

{  }

参考链接 纯CSS气泡效果

需要用到的知识点:

当div的宽度和高度都是0时,整个边框是由四个三角形组成的,每一边为一个三角形,利用这点,来做小尖角,比如如下:

css实现气泡的小尖角效果

把不需要的三边的边框的颜色设置为与背景相同,这样就得到想要的小尖角,然后再利用定位调整一下位置就可以了。

css实现气泡的小尖角效果 

上面的方法可以得到一个带有颜色的小尖角,但是效果图是显示带有边框的小金角。所以在已有的基础上,出现两个小尖角,然后进行叠加,利用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.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“css实现气泡的小尖角效果”

暂无css实现气泡的小尖角效果的评论...