效果图(边框颜色太淡,放在{}里面):
{ }
参考链接 纯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气泡小尖角内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
写给初用Nestj做项目的你(第二篇: 配置gitlab-runner操作gitlab) 如果不想自己搭...
web前端开发中避免不了要在页面上显示很多文章,如何才能从文中,文末点击快捷的...
工欲善其事,必先利其器! 就在不久之前,Java领域的开发神器 IntelliJ IDEA 终...
本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义,mask 译为遮罩。在 C...
考虑以下两段代码: 复制代码 代码如下: urlset url lochttp://www.caixw.com/ar...
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终...
链入式是把所有的 样式 放在一个或多个 外部样式表文件 中,这个文件是以 css 为...
根据百度地图官方解释,在移动端 H5 页面中可监听下面这 4 个事件: touchstart, ...
前言 2021 年中国共产党将迎来建党 100 周年。百年来中国社会发生了沧桑巨变。从...
对于网页制作者来说,最烦琐的事情可能就是给页面中的图片或文字加链接了。假如...