css 左上角盖章样式

CSS是一种用于美化网页样式的工具，可以使用CSS在网页中添加各种各样的样式和元素。其中，左上角盖章样式是一种非常常见且有趣的样式效果。下面我们就来看看如何使用CSS实现左上角盖章样式。

    .badge {
            width: 100px;
            height: 100px;
            position: relative;
    }
        .badge::before {
            content: "";
            position: absolute;
            top: -25px;
            left: -25px;
            width: 60px;
            height: 60px;
            background-color: #ff0000;
            border-radius: 50%;
            transform: rotate(-45deg);
            z-index: -1;
    }
        .badge::after {
            content: "badge";
            position: absolute;
            top: 25px;
            left: 0;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            font-weight: bold;
            background-color: #ff0000;
            color: #fff;
    }
    

首先，我们需要给包含盖章的元素添加一个position: relative; 的样式，这样内部的绝对定位元素就可以在相对定位元素的基础上定位。

接着，我们使用伪元素::before来添加一个红色的背景圆形，并将其旋转45度使其呈现为一个盖章的形态，然后将其放置在包含元素左上角的位置，通过z-index将其放在所有元素的底部。

最后，我们使用伪元素::after来添加一个显示文字的矩形框，并将其放置在包含元素的下半部分中心位置，通过设置宽高、行高、字号等样式属性，美化显示效果。

以上就是实现CSS左上角盖章样式所需的代码及说明，可以根据自己的需要灵活调整样式效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！