仅使用伪元素创建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。

Answer 1

由于在伪元素中不能放置任何html标记，因此仅使用简单的形状并将它们组合在一起就需要变得聪明。此外，您不能有多个:after伪元素，因此我们仅限于两种形状（一种用于:after，一种用于:before）。在:after could be the bestseller front of the badge, with text. The trickiest part was to get the剪切路径中：polygon（... points）to get right so that we get the effect of trimmed ribbon. Fortunately, Firefox dev tools have a nifty polygon modification tool that was very helpful. Getting the two little corners that make the "wrap around" effect was a bit trickier, but putting it in a中的一个：在pseudo element with 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>

Answer 2

仅在使用伪类的CSS的帮助下，我们无法创建完全相同但可以相似的东西。将ID“ ribbon”添加到带有“ box”类的div中，然后尝试使用以下CSS。根据div的大小增加/减少高度，右上角等。

stringMatrix, matrix = random_maze()

除了尝试使用边框作为功能区的背景色之外，您还可以尝试使用功能区图像作为背景，并在其顶部使用文本。