写给自己的——CSS实现渐变提示框

之前写页面的时候有遇到渐变的提示框，折腾了很久都没搞定那个小三角，今天某然看到一位大神竟然用多种方法把它给实现了，于是我就挑了一种最简单的方法去试了下，并用这篇文章记录起来，方便自己以后使用

这个提示框，最不好实现的是小三角，渐变背景都好实现，代码如下：

<div class="tips">
    渐变提示框
</div>

<style>
    .tips{
        position: relative;
        padding: 8px 10px;
        border-radius: 4px;
        color: #fff;
    }
    .tips::before,
    .tips:after{
        position: absolute;
        width: 100%;
        height: 100%;
        content: ' ';
        left: 0;
        top: 0;
        z-index: -1;
        background: linear-gradient(90deg, #ff8da2, #ec5b60);
    }
    .tips::before{
        top: 0;
        /* 实现渐变背景，背景裁剪位置从0开始就好了，round表示圆角 */
        clip-path: inset(0 0 round 4px);
    }
    .tips::after{
        top: 7px;
        /* 实现小三角，只需要3个点的坐标就可以了 */
        clip-path: polygon(calc(50% - 7px) calc(100% - 7px), calc(50% + 7px) calc(100% - 7px), 50% 100%);
    }
</style>

参考文章：
CSS 实现支持渐变的提示框（tooltips）