css实现antd丝带效果

努力的白熊嗨2024-11-04 1:04
先上效果图：
代码：
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .ant-ribbon {
        box-sizing: border-box;
        margin: 0;
        padding: 0 8px;
        color: #1677ff;
        font-size: 14px;
        line-height: 22px;
        list-style: none;
        position: absolute;
        top: 8px;
        white-space: nowrap;
        background-color: #1677ff;
        border-radius: 4px;
        border-end-end-radius: 0;
    }

    .ant-ribbon-text {
        color: #ffffff;
    }

    .ant-ribbon-placement-end {
        inset-inline-end: 8px;
        border-end-end-radius: 0;
    }

    .ant-ribbon-corner {
        position: absolute;
        top: 100%;
        width: 8px;
        height: 8px;
        color: currentcolor;
        border: 4px solid;
        transform: scaleY(0.75);
        transform-origin: top;
        filter: brightness(75%);
        box-sizing: border-box;
        inset-inline-end: 0;
        border-inline-end-color: transparent;
        border-block-end-color: transparent;
    }

</style>

<body>
    <div class="ant-ribbon ant-ribbon-placement-end">
        <span class="ant-ribbon-text">5.17.0</span>
        <div class="ant-ribbon-corner">
        </div>
    </div>
</body>

</html>