纯CSS3实现一个丝带效果

王小婷

发布于 2025-05-19 15:13:29

1310

要实现一个边角有丝带的效果，如上图左上角的标识。示例代码如下所示：

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset=utf-8>
        <title>css边角丝带效果</title>
        <style type="text/css">
            .Generally {
                background: #3588bc;
                overflow: hidden;
                white-space: nowrap;                
                position: absolute;
                left: -50px;
                top: -10px;
                -webkit-transform: rotate(-47deg);
                -moz-transform: rotate(-47deg);
                -ms-transform: rotate(-47deg);
                -o-transform: rotate(-47deg);
                transform: rotate(-47deg);
            }           
            .Generally a {
                color: rgba(254, 254, 254, 1);
                display: block;
                font-size: 12px;
                padding: 20px 50px 8px 50px;
                text-align: center;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div class="Generally">
            <a href="#">临时</a>
        </div>
    </body>
</html>

或者

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset=utf-8>
        <title>css边角丝带效果</title>
        <style type="text/css">
            .test {
                display: flex;
                /* flex布局 ,适用一维布局，即行或者列*/
                flex-direction: row;
                /* 主轴方向为水平方向，起点在左端 */
                justify-content: center;
                /* 主轴排列方式 */
                color: #fff;
                /* 字体颜色 */
                font-size: 50px;
                /* 字体大小 */
                width: 200px;
                /* 容器的宽度 */
                height: 200px;
                /* 容器的高度度 */
                background-image: linear-gradient(to bottom right, #49BCF5 50%, rgba(242, 242, 242, 0) 50%);
                /* 从原点到右下角渐变 */
                border-radius: 10px 0 0 0;
                /* 右上角圆角 */
            }           
            .word {
                transform: rotate(-45deg);
                /* 文字旋转 */
            }
        </style>
    </head>
    <body>
        <div class="test">
            <span class="word">临时</span>
        </div>
    </body>
</html>

另外推荐：前端常用到的6种精美纯CSS3丝带效果： http://www.jq22.com/webqd3850