CSS三角强化的巧妙运用（HTML、CSS）

╰半橙微兮° 2023-10-03 13:16 16阅读 0赞

### CSS三角强化的巧妙运用（HTML、CSS） ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS三角强化的巧妙运用</title>
        <style>
            .box1 {
                width: 0;
                height: 0;
                /*  border-top: 100px solid transparent;
                border-right: 50px solid skyblue;
                border-bottom: 0px solid blue;
                border-left: 0px solid green; */
    
                /* 1、只保留右边的边框有颜色 */
                border-color: transparent red transparent transparent;
    
                /*  2、样式都是solid */
                border-style: solid;
    
                /* 3、上边框宽度要大，右边款 宽度稍小，其余的边框设置为0 */
                border-width: 100px 50px 0 0;
    
            }
    
            .price {
                width: 160px;
                height: 24px;
                line-height: 24px;
                border: 1px solid red;
                margin: 0 auto;
            }
    
            .miaosha {
                position: relative;
                float: left;
                width: 90px;
                height: 100%;
                background-color: red;
                text-align: center;
                color: #fff;
                font-weight: 700;
                margin-right: 8px;
            }
    
            .miaosha i {
                position: absolute;
                right: 0;
                top: 0;
                width: 0;
                height: 0;
                border-color: transparent #fff transparent transparent;
                border-style: solid;
                border-width: 24px 10px 0 0;
            }
    
            .origin {
                font-size: 12px;
                color: gray;
                text-decoration: line-through;
                /* 文字划线 */
            }
        </style>
    </head>
    
    <body>
        <div class="box1"></div>
    
        <div class="price">
    
            <span class="miaosha">￥1650
                <i></i>
            </span>
    
            <span class="origin">￥5650</span>
    
        </div>
    </body>
    
    </html>