[转]css实现不同样式的tooltip对话框小三角

不同样式tooltip对话框小三角的css实现

这篇文章总结的非常好全面,转帖于此,感谢原文作者。

开发过程中已经遇到过好多次需要手动实现 tooltip 样式了,这里就总结下,以便未来更好的复制粘贴。

如上图,常见的 tooltip 总共有 3 种类型,纯背景色无边框、有边框、包含背景图,其中的小三角可能是纯色、尖尖有弧度。

下边介绍四种常用的方法来实现 tooltip

贴图

简单方便快捷,一个三角形的图定下位即可。在女朋友的帮助下,用 AI 成功画了三种三角形。

下边我们只需要把三角形贴到矩形下边即可。

  • 纯背景色三角形

    1.  
      .wxml
    2.  
      <view class="tooltip">
    3.  
            <view class="tooltip-text">我是一句提示内容</view>
    4.  
            <image class="tooltip-triangle" src="https://windliangblog.oss-cn-beijing.aliyuncs.com/tooltip-01.png" />
    5.  
      </view>
    6.  
       
    7.  
      .wxss
    8.  
      .tooltip {
    9.  
        width: 400rpx;
    10.  
        margin: 100rpx;
    11.  
        position: relative;
    12.  
      }
    13.  
       
    14.  
      .tooltip-text {
    15.  
        height: 60rpx;
    16.  
        line-height: 60rpx;
    17.  
        background: #F5F8FF;
    18.  
        color: #494949;
    19.  
        border-radius: 5rpx;
    20.  
        padding: 20rpx;
    21.  
      }
    22.  
       
    23.  
      .tooltip-triangle {
    24.  
        position: absolute;
    25.  
        width: 30rpx;
    26.  
        height: 30rpx;
    27.  
        top: 60rpx;
    28.  
        left: 200rpx;
    29.  
      }
  • 带边框的三角形和三角形圆角

    1.  
      .wxml
    2.  
      <view class="tooltip">
    3.  
            <view class="tooltip-text">我是一句提示内容</view>
    4.  
            <image class="tooltip-triangle" src="https://windliangblog.oss-cn-beijing.aliyuncs.com/tooltip-02.png" />
    5.  
      </view>
    6.  
       
    7.  
      .wxss
    8.  
      .tooltip {
    9.  
      width: 400rpx;
    10.  
      margin: 100rpx;
    11.  
      position: relative;
    12.  
      }
    13.  
       
    14.  
      .tooltip-text {
    15.  
      height: 60rpx;
    16.  
      line-height: 60rpx;
    17.  
      background: #f5f8ff;
    18.  
      color: #494949;
    19.  
      border-radius: 5rpx;
    20.  
      padding: 20rpx;
    21.  
      border: 2px solid #002fa7;
    22.  
      }
    23.  
       
    24.  
      .tooltip-triangle {
    25.  
      position: absolute;
    26.  
      width: 30rpx;
    27.  
      height: 30rpx;
    28.  
      top: 62rpx;
    29.  
      left: 200rpx;
    30.  
      }

    发现原有的 border 没有盖住,然后从重新做了一张上边延伸背景色的图。

    圆角的三角同理,换下 image 的 src 即可。

利用 border

不知道是谁第一个想到的这种方案,是真的很神奇。我们经常写 border ,可有没有想过它的四个角的连接处是什么样的?

让我们将连接处放大:

会发现每条边其实是一个梯形,然后互相接起来。那么如果 border 中内容的宽高都是 0 会怎么样呢?

  1.  
    .border {
  2.  
      border-width: 4px;
  3.  
      border-color: #F00 #0F0 #00F #0FF;
  4.  
      border-style: solid;
  5.  
      width: 0px; 
  6.  
      height: 0px;
  7.  
    }

三角形出现了!我们只需要将左边下边右边的 border 颜色设置为透明就是我们要的三角形了,border-color: #F00 transparent transparent transparent;

此外,虽然底部 boder 设置为透明了,但是还占据高度,我们可以将它的 width 设为 0border-bottom-width: 0

然后我们只需要将之前使用的图片替换掉即可。

  1.  
    .wxml
  2.  
    <view class="tooltip">
  3.  
            <view class="tooltip-text">我是一句提示内容</view>
  4.  
            <view class="tooltip-triangle"></view>
  5.  
    </view>
  6.  
     
  7.  
    .wxss
  8.  
    .tooltip {
  9.  
        max-width: 400rpx;
  10.  
        margin-left: 20rpx;
  11.  
        position: relative;
  12.  
    }
  13.  
    .tooltip-text {
  14.  
        padding: 15rpx;
  15.  
        background: #002FA7;
  16.  
        color: #fff;
  17.  
        border-radius: 5rpx;
  18.  
    }
  19.  
     
  20.  
    .tooltip-triangle {
  21.  
        position: absolute;
  22.  
        top: 62rpx;
  23.  
        left: 200rpx;
  24.  
        border-width: 30rpx;
  25.  
        border-color: #002FA7 transparent transparent transparent;
  26.  
        border-style: solid;
  27.  
        width: 0px;
  28.  
        height: 0px;
  29.  
    }

效果如下:

三角形形状的话,我们可以通过 border-width 属性去调整高低胖瘦。

  • 带边框三角

上边的矩形和三角形都没有边框,如果是有边框的,下边这种该怎么实现呢?

其实很简单,我们只需要在原有三角形的位置写一个一样的三角形,然后颜色设置为对话框的背景色,向上偏移一定位置即可。

把覆盖的三角形颜色设置为红色,这样看起来就很明显了,如下图:

代码如下:

  1.  
    .wxml
  2.  
    <view class="tooltip">
  3.  
            <view class="tooltip-text">我是一句提示内容</view>
  4.  
            <view class="tooltip-triangle-top"></view>
  5.  
            <view class="tooltip-triangle"></view>
  6.  
    </view>
  7.  
     
  8.  
    .wxss
  9.  
    .tooltip {
  10.  
        max-width: 400rpx;
  11.  
        margin-left: 20rpx;
  12.  
        position: relative;
  13.  
    }
  14.  
     
  15.  
    .tooltip-text {
  16.  
        padding: 15rpx;
  17.  
        background: #fff;
  18.  
        border-radius: 5rpx;
  19.  
        border: 5rpx solid #002FA7;
  20.  
    }
  21.  
     
  22.  
    .tooltip-triangle-top {
  23.  
        position: absolute;
  24.  
        top: 71rpx;
  25.  
        left: 200rpx;
  26.  
        border-width: 30rpx;
  27.  
        border-left-width: 20rpx;
  28.  
        border-right-width: 20rpx;
  29.  
        border-color: #FFF transparent transparent transparent;
  30.  
        border-style: solid;
  31.  
        width: 0px;
  32.  
        height: 0px;
  33.  
        z-index: 10;
  34.  
    }
  35.  
     
  36.  
    .tooltip-triangle {
  37.  
        position: absolute;
  38.  
        top: 76rpx;
  39.  
        left: 200rpx;
  40.  
        border-width: 30rpx;
  41.  
        border-left-width: 20rpx;
  42.  
        border-right-width: 20rpx;
  43.  
        border-color: #002FA7 transparent transparent transparent;
  44.  
        border-style: solid;
  45.  
        width: 0px;
  46.  
        height: 0px;
  47.  
    }

矩形旋转

只需要两个同样位置的矩形,然后旋转上边的矩形即可。旋转过来的三角形的长边就是原来矩形的长,三角形边长比是1 比 1 比根号 2。所以原有矩形的长宽比应该为根号 2 比 1。即,width = 1.41 * height 。

代码的话,我们用伪元素矩形旋转,另一个矩形设置 overflow:hidden 即可。

  1.  
    .wxml
  2.  
    <view class="tooltip">
  3.  
            <view class="tooltip-text">我是一句提示内容</view>
  4.  
            <view class="tooltip-triangle"></view>
  5.  
    </view>
  6.  
     
  7.  
    .wxss
  8.  
    .tooltip {
  9.  
        max-width: 400rpx;
  10.  
        position: relative;
  11.  
    }
  12.  
     
  13.  
    .tooltip-text {
  14.  
        padding: 15rpx;
  15.  
        background: #002FA7;
  16.  
        border-radius: 5rpx;
  17.  
        color: #FFF;
  18.  
    }
  19.  
     
  20.  
     
  21.  
    .tooltip-triangle {
  22.  
        position: relative;
  23.  
        left: 150rpx;
  24.  
        width: calc(30rpx * 1.41);
  25.  
        height: 30rpx;
  26.  
        overflow: hidden;
  27.  
    }
  28.  
     
  29.  
     
  30.  
    .tooltip-triangle::before {
  31.  
        content: '';
  32.  
        width: 100%;
  33.  
        height: 100%;
  34.  
        background: #002FA7;
  35.  
        display: block;
  36.  
        transform: rotate(-45deg);
  37.  
        transform-origin: left top;
  38.  
    }

由于我们三角形是由矩形生成的,所以带边框的 tooltip  相对 border 的方法就容易多了。

我们只需要给伪元素设置边框即可。

  1.  
    .wxss
  2.  
    .tooltip {
  3.  
        max-width: 400rpx;
  4.  
        position: relative;
  5.  
    }
  6.  
     
  7.  
    .tooltip-text {
  8.  
        padding: 15rpx;
  9.  
        background: #f5f8ff;
  10.  
        color: #494949;
  11.  
        border-radius: 5rpx;
  12.  
        border: 4rpx solid #002fa7;
  13.  
    }
  14.  
     
  15.  
     
  16.  
    .tooltip-triangle {
  17.  
        position: relative;
  18.  
        left: 150rpx;
  19.  
        width: calc(30rpx * 1.41);
  20.  
        height: 30rpx;
  21.  
        overflow: hidden;
  22.  
    }
  23.  
     
  24.  
     
  25.  
    .tooltip-triangle::before {
  26.  
        content: '';
  27.  
        border: 4rpx solid #002fa7;
  28.  
        background: #f5f8ff;
  29.  
        width: 100%;
  30.  
        height: 100%;
  31.  
        display: block;
  32.  
        transform: rotate(-45deg);
  33.  
        transform-origin: left top;
  34.  
        box-sizing: border-box;
  35.  
        border-radius: 8rpx;
  36.  
    }

此时出现了一个问题,上边矩形的 border 露了出来。

这里用一个 trick 的方法,我们在原有矩形上边加一个 border 盖住上边矩形的边框。

  1.  
    .wxss 添加下边的属性
  2.  
    .tooltip-triangle {
  3.  
        border-top: 4rpx solid #f5f8ff;
  4.  
        bottom: 8rpx;
  5.  
    }

此外,带弧角的三角形,我们也只需要在伪元素矩形上设置圆角即可。

  1.  
    .wxss 添加下边的属性
  2.  
    .tooltip-triangle::before 
  3.  
        border-radius: 8rpx;
  4.  
    }

clip-path

下边这种 tooltip 类型,小三角延伸了背景图片(背景图片 url 可能不是固定的),上边几种方法都是无能为力的。

此时就需要 clip-path 属性了,我们可以在 clippy 快速生成我们需要的多边形路径。

https://bennettfeely.com/clippy/

polygon 就是画多边形,然后给定各个点的坐标即可,代码中各个颜色和图片中的各个点是对应的。

然后我们把上边的代码复制过来即可。

  1.  
    .wxml
  2.  
    <view class="tooltip">
  3.  
            <image src="https://windliangblog.oss-cn-beijing.aliyuncs.com/meituan4.jpg" class="tooltip-text"></image>
  4.  
    </view>
  5.  
     
  6.  
    .wxss
  7.  
    .tooltip {
  8.  
        max-width: 400rpx;
  9.  
        position: relative;
  10.  
    }
  11.  
     
  12.  
    .tooltip-text {
  13.  
        width: 400rpx;
  14.  
        height: 200rpx;
  15.  
        overflow: hidden;
  16.  
        clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 70% 80%, 63% 100%, 55% 80%, 1% 80%);
  17.  
    }

使用 clip-path 的话 border 和圆角就比较难搞了,因为最下边的边其实是被截掉了。

 Web 页面中可以使用 SVG 来实现想要的效果,可以 参考这里 的一个回答。

https://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style

但在小程序中我没想到好方法,欢迎大家和我交流。

上边主要介绍了贴图、border、矩形旋转、clip-path四种方法。日常开发中,border 方案基本满足需要了,偷懒的话也可以直接找设计要图。大家还用过其他方法吗?

posted @ 2022-09-05 09:41  柒零壹  阅读(175)  评论(0编辑  收藏  举报