html - 使用 CSS 伪选择器实现丝带形状

Question

我有以下结构，其中轮播中的多个元素有一个编号的徽章，上面的白色部分在使用白色背景时效果很好，但在某些情况下图像会出现在徽章后面。是否可以做出相同的效果，但下方有一个透明的空白区域？

这是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

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

这个 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% 确定为什么会这样。我有根据的猜测是，一个正在渲染边界连接，而另一个正在渲染表面上看起来是元素边缘的东西。