时间:2021-05-08
效果图(边框颜色太淡,放在{}里面):
{ }
参考链接 纯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气泡小尖角内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
页面设计需求,做了一个气泡形状的弹出框,效果如下:设计思路如下:1.使用Path绘制气泡的尖尖,将这个放到顶层;2.在用border绘制长方形框,将这个放到底层
一、字体与字符显示的关系这里左右方向的尖角,字体为宋体:不受字体影响型:<>这里左右方向的尖角,字体为Arial:不受字体影响型:<>这里左右方向的尖角,字体为
本文实例讲述了js由下向上不断上升冒气泡效果的方法。分享给大家供大家参考。具体实现方法如下:JS实现气泡从水中急速上升效果body{cursor:crossha
在Web前端页面实现圆角效果,CSS3帮你轻松实现,一个人人皆知的属性。CSS3圆角的优点传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得
微信小程序利用css实现遮罩效果实例详解实现效果图:如图所示,使用css实现小程序的遮罩效果,代码如下js文件代码://index.js//获取应用实例vara