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

最新推荐文章于 2022-11-01 17:11:16 发布

不易撞的网名

最新推荐文章于 2022-11-01 17:11:16 发布

阅读量287

点赞数

分类专栏：前端文章标签： html css3 css html5

本文链接：https://blog.csdn.net/weixin_50569789/article/details/119605009

版权

前端专栏收录该内容

264 篇文章 5 订阅

订阅专栏

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>