纯css实现气泡对话框尖角处理

最新推荐文章于 2024-08-30 10:03:46 发布

ljw_Josie

最新推荐文章于 2024-08-30 10:03:46 发布

阅读量8k

点赞数 1

分类专栏： web前端取经路上 CSS3

本文链接：https://blog.csdn.net/ljw_Josie/article/details/71249088

版权

本文介绍如何仅使用CSS创建气泡对话框的尖角效果。通过调整不同方位border-color的顺序，可以实现不同方向的尖角。关键在于利用两个不同比例的三角形元素，一个为实心背景，一个为白色背景，通过相对定位和大小调整使它们完美重合，呈现出所需颜色的尖角。

摘要由CSDN通过智能技术生成

先来看一下效果图：

简单粗暴上代码：

html：

                    <div class="dialog-box">
                      <span class="bot"></span>
                      <span class="top"></span>
                    </div>

less:

      .dialog-box {
        position: relative;
        span {
          width:0; 
          height:0; 
          font-size:0; 
          overflow:hidden; 
          position:absolute;
          &.bot{