CSS三角运用：仿京东的秒杀案例-CSDN博客

本文链接：https://blog.csdn.net/qq_44156869/article/details/113955680

在这里插入图片描述
仿京东的秒杀案例：

<head>
    <style>
        .box1 {
            width: 0;
            height: 0;
            width: 0;
            height: 0;
            /*3.把顶部的颜色设为透明,再把上边框宽度调大*/
            /* border-top: 100px solid transparent;
            border-right: 50px solid green; */
            /*1.首先把border-bottom的边框设为0*/
            /* border-bottom: 0px solid blue; */
            /*2.再把左侧的设为0*/
            /* border-left: 0px solid pink; */
            
            /*简写方式*/
            /*1.只保留右边的边框有颜色*/
            border-color: transparent green 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">￥427 
            <i></i>
        </span>
        <span class="origin">￥1420</span>
    </div>
</body>

在这里插入图片描述