css 图片上面加角标

在网页设计中，给图片加上一个小角标可以让页面变得更加美观、有活力。那么，我们该如何使用CSS在图片上面加角标呢？

.image{
   position: relative;
}

.image:before{
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   width: 50px;
   height: 50px;
   background-color: #ff6600;
   transform: rotate(45deg);
}

在上面的代码中，我们首先设置图片的position属性为relative，这样角标就不会超出图片范围而被隐藏。然后，我们使用:before伪类来添加角标，设置其position为absolute，让其相对于图片进行定位。

接着，我们使用top和right属性来控制角标的位置，这里让其位于图片的右上角。然后，设置角标的宽和高，以及背景颜色。最后，使用transform属性来将角标旋转45度。

以上就是在CSS中为图片添加角标的方法。如果想要个性化角标，只需要调整伪类的属性即可。此外，也可以使用:before和:after伪类来添加多个角标，让页面更加炫酷。