How to implement gradient tooltips with CSS

This article will introduce to you how to use CSS to implement tooltips that support gradients. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Today we will look at a very common interaction: Tooltips. Usually the prompt boxes are solid colors. For example, the following

layout is not complicated to implement. It can be formed by splicing a rounded rectangle and a small triangle with the same settings. The color is enough

This is not the focus of this article. If you are interested, you can visit css-tips (codepen.io)

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

Sometimes, in order to highlight the features of the product or to follow the design trend, the design will use a gradient background, such as in the lulu UI Edge version Tips component

If you still use the "splicing" method, there will inevitably be problems with the connection, and there will be obvious " "Fragmented" feeling, the visual restoration will be greatly reduced

So, how to achieve this kind of effect? Let’s take a look

1. Clip-path cutting

clip-path may be the method that many people can think of immediately. However, in actual operation, you will still encounter a lot of trouble

• clip-path: path can support any shape, but it cannot achieve adaptive width and height

• clip-path: polygon Small sharp corners can be achieved, but rounded corners cannot be achieved

• clip-path : inset can realize adaptive rounded rectangle, but cannot realize the small sharp corners below

How to solve this problem? In fact, just combine 2 and 3.

You need two containers of the same size here. You can use ::before and ::after instead, and then To set the same background color, you can define it through custom attributes

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

Why use two containers of the same size? This is to ensure that the gradient background matches perfectly when cropping

Then one of them is cropped into a rounded rectangle, the other is cropped into a small triangle, and thenOverlap Just get it up

.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个点的坐标就可以了 */
}

You can see that the prompt box is completely adaptive, and the real-time effect is as follows

Complete code Accessible tooltips-clip-path (codepen.io)

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

2. Mask

In addition to clip-path, mask is also an idea. If you are not familiar with mask, you can refer to this article

Wonderful CSS MASK (juejin.im)

https://juejin.cn/post /6846687594693001223

The principle here is as follows

##Using

mask, the problem now becomes: How to draw such a graphic through CSS?

1. Universal gradient

There is no graphic that

CSS gradient cannot be drawn, and this is no exception . First, we decompose this graphic. It can be divided into a rounded rectangle and a triangle. The triangle is easier and can be divided into conic-gradient or linear-gradient Drawing

##rounded rectangle is a little bit troublesome, but it can still be decomposed, as follows

It can be synthesized from 4 radial gradients and 2 linear gradients. The implementation with code is

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
}

As long as you have a little patience, you can write it out smoothly

But...

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

可以看到，背景尺寸设置成 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;
}

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

完整代码可访问 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 是可以自适应的，在改变尺寸的情况下不会变形（注意观察圆角），如下

三角形就很容易了，可以用 <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/

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

完整代码可访问 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，兼容性如下

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

1、首先，JS 注册模块 registerPaint

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

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

if (window.CSS) {
    CSS.paintWorklet.addModule('paint-tips.js');
}

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

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

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

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

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

https://www.canvasapi.cn/

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

registerPaint('tips-bg', 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 = '#000';
      ctx.fill();
   }
});

实时效果如下

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

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

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

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

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

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

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

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

四、描边效果

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

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

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

https://juejin.cn/post/6944892753402822686

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

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

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

https://juejin.cn/post/6926353919333531661

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

绘制代码如下

registerPaint('tips-bg', 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, '#F57853');
      gradient.addColorStop(1, '#F8B578');
      ctx.fillStyle = gradient; 
      ctx.fill();
      ctx.strokeStyle = '#FBF8F8'; // 绘制边框
      ctx.lineWidth = lineWidth;
      ctx.lineCap = 'round';
      ctx.stroke();
   }
});

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

实时效果如下

完整代码可访问 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”。

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

The above is the detailed content of How to implement gradient tooltips with CSS. For more information, please follow other related articles on the PHP Chinese website!