JSFiddle Example

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;
}

示例小提琴

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伪选择器来实现功能区形状

1 个答案:

JSFiddle Example

替代

JSFiddle for alternate