使用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度后是个啥样子。