想要在产品卡的左上角添加标签

Question

我想在我的网站上为新产品的卡片制作标签。我的想法是拥有这样的东西

在卡片的左上角。

我正在写这篇文章，因为我需要帮助为其制作 CSS。

我尝试将其做成一个带圆角的正方形，但我不喜欢它的外观。这是布局示例。

这是卡片的 html 和 css：

CSS

#games div {     
  background-color: #3A7BCD; 
  border-radius: 7px; 
  cursor: pointer;
  overflow: clip;
  min-width: 100%;
  max-width: 400px;
  margin-bottom: 15px;
}
#games div *:not(img) {
  margin: 10px;
}
#games div img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

HTML

<div>
  <img src="https://i.postimg.cc/9FJYqQKg/Screen-Shot-2024-05-08-at-4-22-24-PM.png" alt="Banner image">
   <h2>
     Title
   </h2>
   <p>
     Description
   </p>
</div>

Answer 1

您的问题在于定义为剪辑的溢出属性，在这种情况下，实际上您隐藏了溢出元素的所有内容。一个可能的解决方案（尽管可能并不理想）是将您的元素包装在具有相同尺寸的 div 中，然后添加您想要的标签。