关于css3:写给自己的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）