css完成气泡的小尖角实际效果

日期：2021-02-27 类型：科技新闻 

关键词：公众号小程序，小程序正规价格表，微信群签到小程序，网络抽签小程序，个人做小程序需要什么

实际效果图（边框色调太淡，放在{}里边）：

{  }

参照连接 纯CSS气泡实际效果

必须用到的专业知识点：

当div的宽度和高宽比全是0时，全部边框是由4个3角形构成的，每边为1个3角形，运用这点，来做小尖角，例如以下：

把不必须的3边的边框的色调设定为与情况同样，这样就获得要想的小尖角，随后再运用精准定位调剂1下部位便可以了。

 

上面的方式能够获得1个带有色调的小尖角，可是实际效果图是显示信息带有边框的小金角。因此在已有的基本上，出現两个小尖角，随后开展叠加，运用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应用@media回应式兼容各种各样显示屏的方式示 返回下一篇：没有了