css 实现一个尖角_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气泡小尖角内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

css 实现一个尖角_css实现气泡的小尖角效果相关推荐

css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...
css 实现一个尖角_一个讲述了 CSS 相关的技巧、动画实现的开源项目(60篇相关文章)...
iCSS 不止于 CSS 文章围绕 CSS/web动画展开,谈一些有趣的话题,内容天马行空,想到什么说什么,不仅是为了拓宽解决问题的思路,更涉及一些容易忽视或是十分有趣的 CSS 细节. Artic ...
css聊天气派,css如何实现小尖角聊天对话框带尖角的说话泡泡效果
css如何实现小尖角聊天对话框带尖角的说话泡泡效果发布时间:2021-03-20 09:44:20 来源:亿速云阅读:58 作者:小新这篇文章主要介绍了css如何实现小尖角聊天对话框带尖角的说话 ...
纯CSS实现聊天框小尖角、气泡效果
经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: & ...
纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
基于CSS实现的尖角提示符
CSS实现的尖角提示一.概述 ...
html给图标加角标,HTML+CSS入门如何使用CSS创建一个图片角标
本篇教程介绍了HTML+CSS入门如何使用CSS创建一个图片角标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 角标是一个给某元素标明"New",& ...
CSS写一个缺角的div
今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div <!DOCTYPE html> <html lang="en& ...
如何用CSS写一个缺角的div（附源码）
今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div <!DOCTYPE html> <html lang="en& ...
css小三角气泡效果,纯CSS实现聊天框小尖角、气泡效果
那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: 复制代码代码如下: .arrow { width:0; height:0; font-size:0; border:solid 10px ...

css 实现一个尖角_css实现气泡的小尖角效果

css 实现一个尖角_css实现气泡的小尖角效果相关推荐

最新文章

热门文章