首頁 >web前端 >css教學 >CSS如何實現漸層提示框（tooltips）

CSS如何實現漸層提示框（tooltips）

青灯夜游轉載: 2021-07-13 17:38:352504瀏覽

本篇文章為大家介紹一下使用CSS如何實現支援漸層的提示框（tooltips）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

今天來看一個很常見的互動：提示框（tooltips）。通常提示框都是純色的，例如下面這個

CSS如何實現漸層提示框（tooltips）

這類佈局實作不算複雜，可以用一個圓角矩形和一個小三角拼接形成，設定相同的顏色就可以了

CSS如何實現漸層提示框（tooltips）

這個並不是本文的重點，有興趣的可以訪問css-tips (codepen.io)

https ://codepen.io/xboxyan/pen/MLJjWQ

有時候，為了突出強調產品的特點或為了跟隨設計的潮流，設計會用上漸層背景，例如lulu UI Edge 版本中的Tips 組件

CSS如何實現漸層提示框（tooltips）

如果仍然採用“拼接”的方式，不可避免會出現銜接不上的問題，有明顯的“割裂」感，視覺還原會大打折扣

CSS如何實現漸層提示框（tooltips）

那麼，如何實現這類效果呢？一起來看看吧

一、clip-path 裁切

clip-path 可能是很多人馬上就能想到的方式。但實際操作下來，還是會遇到很多麻煩

clip-path: path 可以支援任意形狀，但沒辦法實作自適應寬高
clip-path: polygon 可以實作小尖角，但無法實作圓角
clip-path : inset 可以實作自適應圓角矩形，但是無法實作下方的小尖角

要如何解決這個問題呢？其實把2 和3 結合起來就可以了

這裡需要兩個相同大小的容器，可以用::before 和::after 來代替，然後設定相同的背景色，可以透過自訂屬性定義

.tips{
   position: relative;
   --bg: linear-gradient(45deg, #ff3c41, #ff9800);
}
.tips::before,.tips::after{
  content:&#39;&#39;;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--bg);/*完全相同的背景*/
  z-index: -1;
}

為什麼要用兩個相同大小的容器呢？ 這是為了確保接下來漸層背景在裁切時完全吻合

CSS如何實現漸層提示框（tooltips）

接著其中一個裁切成圓角矩形，另外一個裁切成小三角，然後重疊起來就可以了

.tips::before{
  clip-path: inset(0 0 5px 0 round 5px);
  /*round 可以设置圆角*/
}
.tips::after{
  clip-path: polygon(calc(50% - 5px) calc(100% - 5px), calc(50% + 5px) calc(100% - 5px), 50% 100%);
  /* 实现小三角，只需要3个点的坐标就可以了 */
}

可以看到提示框完全是自適應的，即時效果如下

CSS如何實現漸層提示框（tooltips）

完整程式碼可存取tooltips-clip-path (codepen.io)

https://codepen.io/xboxyan/pen/ExWLyKR

二、mask 遮罩

除了clip-path ，mask 也是個想法。如果還不熟悉mask，可以參考這篇

奇妙的CSS MASK (juejin.im)

https://juejin.cn/post /6846687594693001223

這裡的原則如下

CSS如何實現漸層提示框（tooltips）

##利用

mask ，現在的問題就轉變成了：如何透過CSS 繪製這樣一個圖形？

CSS如何實現漸層提示框（tooltips）

1. 萬能的gradient

#沒有什麼圖形是

CSS 漸變 繪製不出來的，這個也不例外。首先我們把這個圖形分解，這裡可以分成一個圓角矩形和一個三角形，三角形比較容易，可以透過conic-gradient 或 linear-gradient 畫出

CSS如何實現漸層提示框（tooltips）

圓角矩形就稍微有點麻煩了，不過還是可以分解的，如下

CSS如何實現漸層提示框（tooltips）

可以由4個徑向漸層和2個線性漸變合成，用程式碼實作就是

tips{
  -webkit-mask-image: 
    /*4个径向渐变和2个线性渐变*/
    radial-gradient(circle at 5px 5px, green 5px,transparent 0),
    radial-gradient(circle at 5px 5px, green 5px,transparent 0),
    radial-gradient(circle at 5px 5px, green 5px,transparent 0),
    radial-gradient(circle at 5px 5px, green 5px,transparent 0),
    linear-gradient(red,red),
    linear-gradient(blue,blue);
  -webkit-mask-size:
    10px 10px,
      10px 10px,
    10px 10px,
    10px 10px,
    100% calc(100% - 15px),
    calc(100% - 10px) calc(100% - 5px)
  -webkit-mask-position:
    left top,
    right top，
    left 0 bottom 5px,
    right 0 bottom 5px,
    left 5px,
    5px top;
  -webkit-mask-repeat: no-repeat
}

只要有點耐心，都可以很順利的寫出來

但是...

太长了，有很多重复的（4个radial-gradient），非常啰嗦，有没有什么办法优化呢？这里有一个技巧，碰到重复有规律的东西，可以多想想 repeat，利用背景的平铺特性，合理设置背景尺寸就可以了，如下

CSS如何實現漸層提示框（tooltips）

可以看到，背景尺寸设置成 calc(100% - 10px) 就可以达到平铺效果，代码实现就是

tips{
  -webkit-mask-image: 
    /*只需要一个径向渐变即可*/
    radial-gradient(circle at 5px 5px, green 5px,transparent 0),
    linear-gradient(red,red),
    linear-gradient(blue,blue);
  -webkit-mask-size:
    calc(100% - 10px) calc(100% - 15px),/*圆角的尺寸，高度由于还需要减去三角形尺寸，所以多了5px*/
    100% calc(100% - 15px),
    calc(100% - 10px) calc(100% - 5px);
  -webkit-mask-position:
    left top,
    left 5px,
    5px top;
  -webkit-mask-repeat: repeat,no-repeat,no-repeat;
}

是不是精简了许多？然后再把三角形的合过来就行了，可以得到如下效果

1CSS如何實現漸層提示框（tooltips）

完整代码可访问 tooltips-mask-gradient (codepen.io)

https://codepen.io/xboxyan/pen/KKWRWOj

2. 自适应的svg

尽管做了一些优化，上面的代码量仍然非常可观，有没有更加简便的方式呢？

想到了 svg...

一般情况下，svg 路径是固定尺寸的，只能 等比缩放 ，无法做到自适应。不过基本图形是支持自适应的，可以设置百分比尺寸，比如 <rect></rect>

<svg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;100%&#39; height=&#39;100%&#39;>
   <rect rx="5" width=&#39;100%&#39; height=&#39;100%&#39;/>
</svg>

rx 可以设置矩形的圆角，当不设置 ry 时，默认与 rx 相同

这样一个 svg 是可以自适应的，在改变尺寸的情况下不会变形（注意观察圆角），如下

1CSS如何實現漸層提示框（tooltips）

三角形就很容易了，可以用 <polygon></polygon> 实现

<svg xmlns=&#39;http://www.w3.org/2000/svg&#39;>
  <polygon points=&#39;0 0,10 0,5 5&#39; />
</svg>

然后，把两段 svg 直接用作遮罩背景就行了，可以用 mask-size 和 mask-position 分别设置尺寸和位置

tips{
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=&#39;http://www.w3.org/2000/svg&#39;><polygon points=&#39;0 0,10 0,5 5&#39; /></svg>"),url("data:image/svg+xml,<svg xmlns=&#39;http://www.w3.org/2000/svg&#39;><rect rx=&#39;6&#39; width=&#39;100%&#39; height=&#39;100%&#39;/></svg>");
  -webkit-mask-size: 10px 5px, 100% calc(100% - 5px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center bottom, 0 0;
}

svg 用作背景需要在前面添加 data:image/svg+xml ，并且内容需要转义，详细可参考这篇文章：

学习了，CSS中内联SVG图片有比Base64更好的形式

https://www.zhangxinxu.com/wordpress/2018/08/css-svg-background-image-base64-encode/

还是挺不错的，代码量也不多，也比较容易理解，实时效果如下

1CSS如何實現漸層提示框（tooltips）

完整代码可访问 tooltips-mask-svg (codepen.io)

https://codepen.io/xboxyan/pen/poeVrqB

三、paint 绘制

再来介绍一种未来的解决方式， CSS paint 。关于 CSS paint，又称 “CSS 界的绘图板”，简单来说，就是用 canvas 绘图的方式来绘制背景，canvas 几乎什么都能绘制吧，所以这是一种更为通用的解决方案。想快速了解 CSS paint 的可以参考这一篇入门文章：

CSS届的绘图板CSS Paint API简介

https://www.zhangxinxu.com/wordpress/2018/11/css-paint-api-canvas/

不过目前仅支持 Chrome，兼容性如下

CSS如何實現漸層提示框（tooltips）

不过并不影响我们的学习，毕竟是未来的解决方案，先看看大致的语法，如下

1、首先，JS 注册模块 registerPaint

// paint-tips.js
registerPaint(&#39;tips-bg&#39;, class {
    paint(ctx, size, properties) {
       // 在这里绘制背景，语法和canvas类似
    }
});

2、接着，JS 添加模块 CSS.paintWorklet.addModule

if (window.CSS) {
    CSS.paintWorklet.addModule(&#39;paint-tips.js&#39;);
}

3、最后，CSS 中使用 paint(tips-bg)

tips{
  -webkit-mask-image: paint(tips-bg); /*这里作为遮罩背景使用*/
}

下面就来绘制提示框了，如果仍然借助 mask ，那么问题就变成了：如何通过 canvas 绘制这样一个图形？

1CSS如何實現漸層提示框（tooltips）

在 canvas 中，相对于 CSS 来说，这类图形简直就是小儿科，只需要使用 lineTo 和 arc 两个指令就可以绘制了。最关键的一点是，这里的尺寸是实时渲染的，可以通过 size 来获取

关于 canvas 学习，这里推荐一下张鑫旭老师的 Canvas API中文文档，api 和案例比 mdn 文档清晰太多

https://www.canvasapi.cn/

绘制代码如下（下面就是很普通的 canvas 代码了，其实就是几段线段连接起来，然后填充纯色）

registerPaint(&#39;tips-bg&#39;, class {
    paint(ctx, size) { // ctx为绘制上下文，size为容器尺寸
      const { width,height } = size; // 容器尺寸
      const radius = 5; // 圆角大小
      const deg = Math.PI / 2;
      const edge = 5; // 三角形大小
      const pos = width / 2; // 三角形位置
      ctx.beginPath();
      ctx.moveTo(radius,0);
      ctx.lineTo(width-2*radius,0);
      ctx.arc(width-radius,radius,radius,-deg,0);
      ctx.lineTo(width,height-2*radius-edge);
      ctx.arc(width-radius,height-radius-edge,radius,0,deg);
      ctx.lineTo(pos+edge,height-edge);
      ctx.lineTo(pos,height);
      ctx.lineTo(pos-edge,height-edge);
      ctx.lineTo(radius,height-edge);
      ctx.arc(radius,height-radius-edge,radius,deg,2*deg);
      ctx.lineTo(0,radius-edge);
      ctx.arc(radius,radius,radius,-2*deg,-deg);
      ctx.closePath();
      ctx.fillStyle = &#39;#000&#39;;
      ctx.fill();
   }
});

实时效果如下

1CSS如何實現漸層提示框（tooltips）

完整代码可访问 tooltips-mask-paint (codepen.io)

https://codepen.io/xboxyan/pen/JjWvxEN

另外，也可以通过 CSS 变量进行自定义，比如定义一个--r为圆角大小，--t为三角形大小

<tips style="--r:5;--t:5"></tips>

registerPaint(&#39;tips-bg&#39;, class {
  static get inputProperties() { // 定义允许的自定义属性
    return [
      &#39;--r&#39;,
      &#39;--t&#39;
    ]
  }
  paint(ctx, size, properties) { // properties为自定义属性
    const radius = Number(properties.get(&#39;--r&#39;));
    const edge = Number(properties.get(&#39;--t&#39;));
    // ...
  }
})

可以看到绘制是实时更新的（改变圆角），无需 JS 额外处理，实时效果如下

CSS如何實現漸層提示框（tooltips）

完整代码可访问 tooltips-mask-paint-var (codepen.io)

https://codepen.io/xboxyan/pen/JjWvVMd

四、描边效果

有时候提示框可能还会有描边的效果，比如这样的

1CSS如何實現漸層提示框（tooltips）

这类带描边的其实以上方式都不太适用，clip-path 和 mask 都无法实现描边，不过有一个边框生成方案可以参考：

有意思！不规则边框的生成方案 (juejin.cn)

https://juejin.cn/post/6944892753402822686

可惜效果不是特别完美（略微模糊）

如果尺寸固定，那么可以直接使用 svg 方式，参考这篇文章：

用SVG实现一个优雅的提示框 (juejin.cn)

https://juejin.cn/post/6926353919333531661

就目前而言，确实没有比较好的实现方案（有更好的实现方式欢迎补充，我暂时想不出来了），不过如果借助 CSS paint ，那一切就都有可能了！只需要在 paint 函数中绘制边框和背景就行了

绘制代码如下

registerPaint(&#39;tips-bg&#39;, class {
    paint(ctx, size) {
      const { width,height } = size; // 容器尺寸
      const radius = 5; // 圆角大小
      const deg = Math.PI / 2;
      const edge = 5; // 三角形大小
      const pos = width / 2; // 三角形位置
      const lineWidth = 2; // 描边宽度
      ctx.beginPath();
      ctx.moveTo(radius+lineWidth,lineWidth);
      ctx.lineTo(width-2*radius-lineWidth,lineWidth);
      ctx.arc(width-radius-lineWidth,radius+lineWidth,radius,-deg,0);
      ctx.lineTo(width-lineWidth,height-2*radius-edge-lineWidth);
      ctx.arc(width-radius-lineWidth,height-radius-edge-lineWidth,radius,0,deg);
      ctx.lineTo(pos+edge,height-edge-lineWidth);
      ctx.lineTo(pos,height-lineWidth);
      ctx.lineTo(pos-edge,height-edge-lineWidth);
      ctx.lineTo(radius+lineWidth,height-edge-lineWidth);
      ctx.arc(radius+lineWidth,height-radius-edge-lineWidth,radius,deg,2*deg);
      ctx.lineTo(lineWidth,radius+lineWidth);
      ctx.arc(radius+lineWidth,radius+lineWidth,radius,-2*deg,-deg);
      ctx.closePath();
      const gradient = ctx.createLinearGradient(0, 0, width, 0); // 渐变背景
      gradient.addColorStop(0, &#39;#F57853&#39;);
      gradient.addColorStop(1, &#39;#F8B578&#39;);
      ctx.fillStyle = gradient; 
      ctx.fill();
      ctx.strokeStyle = &#39;#FBF8F8&#39;; // 绘制边框
      ctx.lineWidth = lineWidth;
      ctx.lineCap = &#39;round&#39;;
      ctx.stroke();
   }
});

tips{
  /* -webkit-mask-image: paint(tips-bg); */
  background: paint(tips-bg); /*不再借助mask，纯js绘制背景，包括渐变*/
}

实时效果如下

1CSS如何實現漸層提示框（tooltips）

完整代码可访问 tooltips-paint-stroke (codepen.io)

https://codepen.io/xboxyan/pen/QWpxdVp

五、总结和说明

以上针对 tooltips 布局共介绍了3种不同类型的实现方式，分别是 clip-path、mask、CSS paint。其中 mask 的实现重点其实是CSS图形的绘制，主要有渐变和 svg 两种，虽然渐变的写法稍微复杂一点，但是最为通用，其他方式可能换一种布局就不适用了。现在总结一下要点：

可以用多个容器重叠配合 clip-path 实现复杂的自适应效果
在使用 CSS 渐变绘制图形时，相同的形状充分利用平铺特性
svg 基本形状支持百分比尺寸，用作背景同样有效，可以使用多张背景来组合
CSS paint 是未来的最佳解决方式，也能轻易的实现描边效果
CSS paint 唯一的缺陷是兼容性不够好（现仅支持 Chrome 65+ ），但是值得学习

当然，这些方式不仅仅是实现本文的布局而已，更多的是提供一种思路，下次碰到其他的“异形布局”也能马上联想出相应的解决方案，而不是选择“切图.png”。

更多编程相关知识，请访问：编程教学！！

以上是CSS如何實現漸層提示框（tooltips）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css chrome edge xml var JS position background canvas https ui WordPress

陳述：

本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：淺談CSS如何實現九宮格提示超出數量下一篇：淺談CSS如何實現九宮格提示超出數量

看更多