如何让文本背景覆盖至图片边缘？HTML+CSS样式问题求助

问题场景 #

绿色背景的"LATEST"标签当前未覆盖至图片左上角边缘，需要调整样式让背景延伸到图片边缘位置。

最终代码实现 #

HTML（保持原结构无需修改） #

<div class="news">
    <img src="pic.png" alt="" class="news-pic">
    <div class="top-left"> LATEST </div>
</div>

CSS（关键修改） #

.news {
  position: absolute;
  opacity: 1;
  z-index: 2;
  text-align: center;
  color: white;
  top: 400px;
  left: 100px;
  /* 新增相对定位，确保子元素绝对定位基于该容器 */
  position: relative;
}

.news-pic {
  height: 500px;
  width: 900px;
  box-sizing: border-box;
  border-radius: 15px ;
}

.top-left {
  position: absolute;
  top: 15px;
  left: -65px;
  font-size: 1.5rem;
  font-family: Roboto;
  font-weight: 700;
  color: white;
  background-color: #3bbe54;
  /* 加宽背景容器，旋转后足够覆盖图片边缘 */
  width: 280px;
  line-height: 50px;
  text-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.25);
  /* 设置旋转原点为右上角，让背景向图片方向延伸 */
  transform-origin: top right;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

修改说明 #

1. 容器定位修正：给.news添加position: relative，确保.top-left的绝对定位是相对于图片容器，而非整个页面
2. 背景宽度调整：将.top-left的宽度从200px增加到280px，旋转后背景长度足够覆盖到图片左上角边缘
3. 旋转原点优化：设置transform-origin: top right，让标签以自身右上角为旋转中心，旋转时左侧背景自然延伸至图片边缘
4. 位置微调：调整top和left的数值，让标签位置精准贴合图片左上角，同时保证背景完全覆盖目标区域

内容的提问来源于stack exchange，提问作者zndrec ovr