关于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）