css简易制作一个div右上角的标签条

最新推荐文章于 2025-03-16 21:51:33 发布

Wline-core

最新推荐文章于 2025-03-16 21:51:33 发布

阅读量6.9k

点赞数 1

文章标签： css css3

本文链接：https://blog.csdn.net/qq_39473019/article/details/103634666

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            width:200px;
            height:200px;
            position:relative;
            background: #fff;
            overflow: hidden;
        }
        .b{
            width:100px;
            height:100px;
            position: absolute;
            /*background: green;*/
            top:-50px;
            right:-50px;
            transform: rotate(45deg);
        }
        .b span{
            position: absolute;
            bottom:0;
            display: block;
            font-size:16px;
            color:#fff;
            background: #36A8FF;
            width:100px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="b">
        <div class="c"></div>
        <span>交易中</span>
    </div>
</div>
</body>
</html>

利用position使div脱离文档流，然后调整自己需要的大小和位置就行了。