只使用伪元素创建CSS徽章

Question

我有一个已知ID的元素可以被选中。我如何仅使用CSS创建类似于此的畅销徽章？我不能更改HTML。

我知道如何创建这样的徽章，但只有在能够编辑HTML的情况下才行，而我不能：

.box {
  width: 200px; height: 300px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
}
.ribbon {
  position: absolute;
  right: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #79A70A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}

<div class="box">
   <div class="ribbon"><span>Bestseller</span></div>
</div>

问题是我只有父级盒子，并没有里面的带子。我无法输入HTML。

- Krystian

---

这段代码片段展示了你想要的内容。我猜你写的HTML并不完全是你所拥有的，而是你本来想写的？那么你实际上可以访问什么？ - Major Sam

请展示您的HTML代码，即使我们无法编辑它，我们也需要知道存在哪些结构，以帮助您更有效地解决问题。 - Our_Benefactors

我正在寻找一些用于新产品徽章的代码，你的HTML/CSS帮助我解决了我的问题。:) +1 - Studocwho

Answer 1

在伪元素中，您不能放置任何HTML标记，因此您需要巧妙地使用简单形状并将它们组合在一起。此外，您不能有多个:after伪元素，因此我们仅限于两个形状（一个用于:after和一个用于:before）。:after中的那个可以是畅销书封面带文字的徽章，最棘手的部分是要正确使用clip-path: polygon(...points)以获得修剪缎带的效果。幸运的是，Firefox开发工具提供了一个非常有用的多边形修改工具。让两个小角落产生“包裹”效果是有点棘手的，但将其放入一个:before伪元素中，使用z-index: -1和微调偏移量即可解决问题。最终效果如下：

.box {
  width: 200px; height: 300px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  margin: 20px;
  display: inline-block;
}
.bestseller:before {
  content: "";
  z-index: -1;
  overflow: hidden;
  transform: rotate(-135deg);
  width: 120px;
  display: block; 
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 34px;
  right: -16px;
  clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px,  110px 30px);
  height: 20px;
  width: 120px;
}
.bestseller:after {
  content: "bestseller";
  z-index: 1;
  overflow: hidden;
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  width: 120px;
  display: block; 
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 20px; right: -30px;
  clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px,  110px 30px)
}

<div class="box">
</div>

<div class="box bestseller">
</div>

- Piotr Wicijowski

---

太棒了，谢谢！ - Hillcow

Answer 2

仅使用伪类的CSS帮助，我们无法创建完全相同的效果，但可以创建类似的效果。将id“ribbon”添加到具有class“box”的div中，并尝试以下CSS。根据您的div的大小递增/递减高度、右上角等。

#ribbon:before {
    content: "";
    width: 60px;
    display: block;
    position: absolute;
    top: 14px;
    right: -28px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid green;
    height: 0;
}

#ribbon:after {
    content: "Bestseller";
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 30px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 60px;
    display: block;
    position: absolute;
    top: 14px;
    right: 2px;
    height: 30px;
}

不要试图使用边框来设置带子的背景颜色，你可以尝试使用带子图片作为背景，并在其上方放置文本。

- Rajesh Babu

---

带有代码片段会更好。 - mplungjan