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);
css特效文字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⽓泡⼩尖⾓内容请搜索脚本之家以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持脚本之家！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。