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

CSS中有clip-path属性。支持并不是很好，但它确实有效。

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