温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css实现气泡的小尖角效果

发布时间:2021-03-18 11:38:16 阅读:186 作者:小新 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

小编给大家分享一下css实现气泡的小尖角效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

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

{  }

参考链接 纯CSS气泡效果

需要用到的知识点:

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

css实现气泡的小尖角效果

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

css实现气泡的小尖角效果 

上面的方法可以得到一个带有颜色的小尖角,但是效果图是显示带有边框的小金角。所以在已有的基础上,出现两个小尖角,然后进行叠加,利用z-index属性来显示。因为需要两个,可以利用伪元素,这样就不会出现无语义化的元素,代码如下:

&::before {
    content"";
    display: block;
    width0;
    height0;
    border: solid 10px;
    border-color#E9E9E9 rgba(2552552550)
          rgba(2552552550rgba(2552552550);
    position: absolute;
    top208px;
    left40px;
    z-index2;
}

&::after {
    content"";
    display: block;
    width0;
    height0;
    border: solid 8px;
    border-color#fff rgba(2552552550) 
        rgba(2552552550rgba(2552552550);
    position: absolute;
    top207px;
    left41.5px;
    z-index3;
}

看完了这篇文章,相信你对“css实现气泡的小尖角效果”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://www.jb51.net/css/719957.html

css
AI

开发者交流群×