html+css3实现div右上角斜三角删除

html 部分：

        <div class="box">
            <div>
                otherthings
            </div>
            <div class="box-con">
                <span>×</span>
            </div>
        </div>

        <div class="box">
            <div>
                otherthings
            </div>
            <div class="box-con">
                <span>×</span>
            </div>
        </div>

        <div class="box">
            <div>
                otherthings
            </div>
            <div class="box-con">
                <span>×</span>
            </div>
        </div>

css部分：

          .box{
            width:180px;
            height:100px;
            position:relative;
            background: white;
            overflow: hidden;
            border: 1px solid #cccccc;
          }
        .box .box-con{
            width:60px;
            height:60px;
            position: absolute;
            background: red;
            top:-30px;
            right:-30px;
            transform: rotate(45deg);
          }
        .box .box-con span{
            position: absolute;
            bottom:0;
            display: block;
            width:60px;
            text-align: center;
            transform: rotate(-45deg);
        }

效果图：

来源：CSDN

作者：自先沉稳UP

链接：https://blog.csdn.net/Just_Maybe/article/details/103597060