間にある透明な矢印2 <sections>

Question

2つのセクションの間にある透明な矢印を作成するにはどうすればよいですか？どちらのセクションも背景画像とbackground-size: coverを持っています。

例：

私は様々な方法のために研究されているが、ほとんどは私が見つけたが、私はこのケースでは動作しませんと信じどちらも、CSS triangleの通常making of a transparent arrow across a single image、または作りをしています。

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>

別Woyのは、背景画像をclipingためのSVG要素を使用することであろう。 Transparent arrow/triangle