透明箭头在2 <sections>之间

Question

如何在两节之间制作透明箭头？这两个部分都有它的背景图像和background-size: cover.

举个例子：

​

​

我一直在研究各种方法，但我发现大多数方法通常是在单个图像上制作透明箭头，或者CSS三角形的制作，我认为这两种方法都不适用于这种情况。

关于我到目前为止所拥有的。即使它不是一个纯CSS解决方案，我也不会介意，但我无法找到可靠的方法来使用可变宽度来实现它。

Answer 1

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元素来裁剪背景图像。还可以查看另一个问题：透明箭头/三角形