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

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

image.png

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

<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)

阅读 297
1.2k 声望
23 粉丝
0 条评论
1.2k 声望
23 粉丝
文章目录
宣传栏