css三角强化

最新推荐文章于 2024-10-18 18:01:20 发布

黄丫丫07

最新推荐文章于 2024-10-18 18:01:20 发布

阅读量114

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_51495354/article/details/127949560

版权

想要的到较高的直角三角形：把border-bottom=0 border-top更高一点就可以得到较高的直角三角形了。

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

        .miaosha i {

            position: absolute;



            left: 80px;

            width: 0;

            height: 0;

            /* 把上边框宽度调大 */

            /* border-top: 20px solid transparent; */

            /* 左边和下边的边框宽度设置为0 */

            /* border-bottom: 0px solid sandybrown;

            border-left: 0px solid pink;

            border-right: 10px solid slateblue; */

            /* 1 只保留右边的边框颜色 */

            border-color: transparent white transparent transparent;

            /* 2 样式都是solid */

            border-style: solid;

            /* 3 上边框宽度要大 右边框稍小 其余边框为0 */

            border-width: 24px 10px 0 0;



        }



        .s {

            width: 160px;

            height: 24px;

            /* background-color: rgb(248, 129, 129); */

            border: 1px solid red;

            margin: 0 auto;

            line-height: 24px;

        }



        .miaosha {

            position: relative;

            vertical-align: baseline;

            float: left;

            width: 90px;

            background-color: red;

            text-align: center;

            color: white;

            font-weight: 700;

            margin-right: 10px;

        }



        .origin {

            font-size: 12px;

            color: gray;

            text-decoration: line-through;

        }

    </style>

</head>



<body>



    <div class="s">



        <span class="miaosha">

            ￥1650

            <i class="box1"></i>

        </span>

        <span class="origin">



            ￥5650

        </span>



    </div>

</body>



</html>