顶部内部透明箭头

Question

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

期望的输出：

我使用了 skewX() 属性 @web-tiki 已经解释过 here 但我希望它显示在边框的顶部而不是图像的底部并且有本期：

我的代码的 fiddle 演示可用 here

谁能告诉我为什么它在我的情况下不起作用？

Answer 1

如问题所述，您的情况与 example that was provided by web-tiki 略有不同。在您提到的示例中，带有透明切口的边框被包含为图像的底部边框，而您需要它作为纯文本区域的顶部边框。

可以使用该答案中描述的相同 skew 技术实现预期的输出。但是，需要对其进行一些调整以符合您的情况。

首先，应该将倾斜的伪元素（产生边框）添加到纯文本区域的容器中，而不是包含图像的顶部部分。这部分你已经做对了。
接下来，您需要定位边框，即使有边框，您的文本容器的高度也将等于放置在其旁边的其他两个图像。为此，您需要将构成边框的元素放置在纯文本容器 (top: 0%) 内而不是其上方（代码中的 bottom: 100%）。
然后，如果文本容器的背景不透明，您需要对其进行剪辑，使其不出现在创建边框效果的元素后面。这可以通过在等于边框伪元素的 height 的文本容器上添加一个 padding-top，然后为其设置 background-clip: content-box 来实现。
最后，您需要将整个底部向上移动与边框高度相同的像素数，以便通过透明裁剪区域看到顶部图像。这可以通过在底部容器中添加负数 margin-top 来完成。

总而言之，您的代码应该类似于下面的代码片段，以实现您需要的效果。（注意：您的 fiddle 代码太多，因此我为演示创建了一个更简单的示例。

.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>

截图：

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

顶部内部透明箭头

Inside transparent arrow on the top

css

border

css-shapes