顶部的透明箭头

Question

我想在图像上制作透明箭头。这个三角形应该在一个块中缩进并显示背景图像。

期望的输出：

我使用{web-tiki已解释here的skewX()属性，但我希望它显示在边框的顶部而不是图像的底部并出现此问题：

我的代码的小提示演示可用here

有谁可以告诉我为什么它不适用于我的情况？

Answer 1

如问题中所述，您的案例与example提供的web-tiki略有不同。在您所指的示例中，带有透明剪切的边框作为图像的下边框包含在内，而您需要它作为纯文本区域的上边框。

可以使用该答案中描述的相同skew技术实现预期输出。但是，需要稍微调整一下以匹配您的情况。

• 首先，应该将偏斜的伪元素（产生边框）添加到纯文本区域的容器中，而不是保存图像的顶部。这部分你已经正确完成了。
• 接下来，您需要定位边框，使得即使使用边框，文本容器的高度也将等于其侧面放置的其他两个图像。为此，您需要将构成边框的元素放在纯文本容器（top: 0%）中而不是它上面（bottom: 100%代码中）。
• 然后，如果文本容器具有不透明的背景，则需要剪切它，使其不在创建边框效果的元素后面。这可以通过在文本容器上添加padding-top等于边框伪元素的height，然后将background-clip: content-box设置为它来实现。
• 最后，您需要将整个底部向上移动与边框高度相同的像素数，以便通过透明切割区域看到顶部图像。这可以通过向底部容器添加否定margin-top来完成。

完全放上你的代码应该类似于下面的代码片段来实现你需要的效果。 （注意：你的小提琴代码太多，所以我为演示创建了一个更简单的样本。）

.section {
  height: 200px;
  width: 500px;
  background: url(http://lorempixel.com/500/200/nature/3);
}
.bottom-container {
  margin-top: -15px;
  height: 100px;
  width: 500px;
}
.text,
.middle-image,
.right-image {
  float: left;
  height: 100%;
  width: calc(100% / 3);
}
.middle-image {
  background: url(http://lorempixel.com/200/100/nature/2);
}
.right-image {
  background: url(http://lorempixel.com/250/100/nature/1);
}
.text {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding-top: 15px;
  text-align: center;
  line-height: 85px;
  background: #F7F7F7; /* Just for demo */
  background-clip: content-box; /* needed only if your background is not transparent */
  overflow: hidden;
}
.text:after,
.text:before {
  position: absolute;
  content: '';
  top: 0px;
  height: 15px;
  background: rgb(215,182,115);
}
.text:before {
  left: 0px;
  width: 25%;
  transform-origin: left bottom;
  transform: skew(45deg);
}
.text:after {
  right: 0px;
  width: 75%;
  transform-origin: right bottom;
  transform: skew(-45deg);
}

<!-- prefix free library to avoid browser prefixes in CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<section class="section">
</section>
<div class="bottom-container">
  <div class="text">Some text</div>
  <div class="middle-image"></div>
  <div class="right-image"></div>
</div>

<强>截图：

^{注意：执行代码段时显示的图像可能与屏幕截图中显示的图像不同，因为它们是随机占位符图像}