使用 CSS 伪选择器实现带状

Question

我有以下结构，其中旋转木马中的多个元素有一个编号的徽章，上面的白色部分在使用白色背景时工作正常，但在某些情况下图像位于徽章后面。是否可以做出相同的效果，但下面是透明的白色space？

这是HTML代码

<p class="mostwanted"><strong>1</strong></p>

CSS代码

.mostwanted {
  width: 80px;
  height: 56px;
  padding-top: 5px;
  position: absolute; 
  background: #ffc909;
  color: white;
  font-size: 25px;
  text-align: center;
  font-family: 'Viga', sans-serif;
  top: 2px;
  right:17px;
  z-index: 10;
}
.mostwanted:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 13px solid #fff;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

样本Fiddle

JsFiddle

提前致谢。

Answer 1

非常简单。

JSFiddle Example

我们所做的只是交换边界三角形的边。

这个CSS:

border-bottom: 13px solid #fff;
border-left: 40px solid transparent;
border-right: 40px solid transparent;

变成这样：

border-bottom: 13px solid transparent;
border-left: 40px solid #ffc909;
border-right: 40px solid #ffc909;

然后把它移到 div 之外，像这样：

.mostwanted:after {
...
  bottom: -13px
...
}

候补

另一种方法是对丝带褶边使用两个假体：

.mostwanted:after, .mostwanted:before {
  content: "";
  position: absolute;
  bottom: -13px;
  width: 0;
  height: 0;
}
.mostwanted:after {
  left: 40px;
  border-bottom: 13px solid transparent;
  border-right: 40px solid #ffc909;
}
.mostwanted:before {
  left:0;
  border-bottom: 13px solid transparent;
  border-left: 40px solid #ffc909;
}

JSFiddle for alternate

您会注意到第二个选项的别名更好（至少在 Chrome 中）。我会给你一个解释，但我不能 100% 确定为什么会这样。我有根据的猜测是，一个正在渲染边界连接，而另一个正在渲染表面上是元素边缘的东西。

使用 CSS 伪选择器实现带状

Using CSS Pseudo-Selectors to achieve a ribbon shape

html

css

pseudo-element

css-shapes

pseudo-class

JSFiddle Example

候补

JSFiddle for alternate