使用css在照片右上角设置缎带效果
如果所示：
1、css代码：
.ribbon {position: absolute;top: 10px; /* 根据需要调整位置 */right: -30px; /* 根据需要调整位置 */padding: 5px 40px;background-color: red;color: white;font-size: 14px; /* 根据需要调整字体大小 */font-weight: bold;transform: rotate(45deg);/* transform-origin: center; */
}
2、html：
<div class="container1"><img src="...." /><div class=“ribbon”>封面</div>
</div>
3、解释
1）transform
transform: rotate(45deg);
通过 transform 属性将 .ribbon 元素旋转 45 度。45deg 表示旋转的角度。这里的旋转是顺时针方向，使 .ribbon 斜斜地放置。
2）transform-origin
transform-origin: center;
transform-origin 属性定义了一个元素在进行变换（如旋转、缩放、倾斜等）时的基准点或中心点。默认情况下，transform-origin 的值是 center，即变换围绕元素的中心点进行（元素就是旋转的dom，在本例子中，就是写着“封面”二字的div）。
如果想设置元素的其他部分（估计除了中心点外，只有4个角了），比如将元素的右上角作为旋转点，可以这样设置：
transform-origin: top right;
3）结合本例子
上面的例子，如果没有旋转，就是一个普通的，水平放置在照片右上角的块。至于为何要将right设为负数，可以想象一下如果不设为负数，这个div围绕自己的中心点顺时针旋转45度后是个啥样子。