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

最新推荐文章于 2024-06-28 17:10:15 发布

自先沉稳UP

最新推荐文章于 2024-06-28 17:10:15 发布

阅读量6.1k

点赞数 10

分类专栏： css3，html 文章标签： html右上角斜三角删除功能 css+html右上角删除斜三角

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

版权

css3，html 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS进行样式设计的方法，通过具体的HTML和CSS代码示例，展示了如何创建具有特定效果的元素，如带有圆角、背景色和旋转图标的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大致就是这样，模子出来了剩下的细节，什么圆角啊，背景色啊，或者icon都可以加。

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);
        }

效果图：