html - 2 个 <sections> 之间的透明箭头

Question

如何在两个部分之间制作透明箭头？两个部分都有其背景图像并带有 background-size: cover .

一个例子:

我一直在研究各种方法，但我发现的大多数通常是 making of a transparent arrow across a single image ，或制作CSS triangle ，我认为这两者都不适用于这种情况。

A snippet on what I have so far 。即使它不是纯 CSS 解决方案，我也没关系，但我找不到一种方法来可靠地使用可变宽度来实现它。

Answer 1

有clip-path CSS 中的属性。支持不是很好，但很有效。

section {
  width: 300px;
  height: 200px;
}

.first {
  background: red;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 60% 85%, 50% 100%, 40% 85%, 0 85%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 60% 85%, 50% 100%, 40% 85%, 0 85%);
}

.second {
  background: green;
  margin-top: -30px;
}

<section class="first"></section>
<section class="second"></section>

另一个问题是使用 SVG 元素来剪切背景图像。另请参阅另一个问题:Transparent arrow/triangle