css - 顶部内部透明箭头

Question

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

期望的输出:

我使用了@web-tiki 解释过的 skewX() 属性 here但我希望它显示在边框的顶部而不是图像的底部并且有这个问题:

我的代码的 fiddle 演示可用 here

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

Answer 1

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

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

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

截图:

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