提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

CSS代码实现提示气泡效果

CSS代码 实现 效果 提示 气泡
2023-09-11 14:19:37 时间

气泡三角主要使用，border-color ，把元素的前后伪元素，叠加生成气泡上方的小箭头；

border-color：如果元素都是边框，则是三角形如下图

 

 伪元素其他3边透明，留一个边（即三角形，两个伪元素位置差1-2像素形成三角形的两个边）

 

例子：

 

 

思路：

    整体绿框通过border 设置；

    三角部分先通过 before伪元素设置一个全绿三角，再通过after设置一个全白三角遮住部分，形成所需效果。

html：

<div class="div"></div>

css：

    .div{
        width: 200px;
        height: 100px;
        border: 2px solid #95eb6c;
        position: relative;
        top: 50px;
    }
    .div::before{
    content: '';
    width: 0;
    height: 0;
    border: 20px solid;
    position: absolute;
    top: -40px;
    left: 140px;
    border-color: transparent transparent #95eb6c;
    }
    .div::after{
    content: '';
    width: 0;
    height: 0;
    border: 20px solid;
    position: absolute;
    top: -36px;
    left: 140px;
    border-color: transparent transparent  #fff;
    }
    .div{
    width: 200px;
    height: 100px;
    border: 2px  solid #95eb6c;
    border-radius: 7px;  /*圆角弧度为7px*/
    position: relative;
  }

 

 

转： https://blog.csdn.net/RedaTao/article/details/103903014

https://wenku.baidu.com/view/c7597108b7daa58da0116c175f0e7cd1842518f0.html

https://baike.baidu.com/item/CSS%20border-color/2152244?fr=aladdin

 

相关文章