Transparent arrow in between 2

Question

How do I make a transparent arrow that is between 2 sections? Both sections have its background-image and with background-size: cover.

An example:

I have been researching for various methods but most I found are usually making of a transparent arrow across a single image, or making of CSS triangle, both of which I believe do not work for this case.

A snippet on what I have so far. I would be okay even if it's not a pure CSS solution but I cannot find a way to do it reliably with a variable width.

This may be of help too (written before clipping in CSS was supported in general - older browsers won't): https://stackoverflow.com/questions/18659926/creating-a-transparent-inner-notch/18664225#18664225 — , May 21 '16 at 21:41

score 3 · Accepted Answer · edited May 23 '17 at 12:19

There is clip-path property in CSS. Support is not wery good, but it works.

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>

Another woy would be to use SVG element for cliping background image. Also look into another question: Transparent arrow/triangle

Transparent arrow in between 2

1 Answers1