Transparent triangle over an iframe or div

Question

I've got one problem. I need to include to my page one iframe with maps. And I need one (or two) triangles over this iframe with a transparent background. I've tried this solution, but it didn't work. How can I realize it?

Answer 1

What you are trying to achieve is done by cropping the image in the shape of the arrow and giving it a negative margin so the element below overlaps the header image.

Proof of concept:

.example {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(50% + 20px) calc(100% - 20px), 50% 100%, calc(50% - 20px) calc(100% - 20px), 0 calc(100% - 20px));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(50% + 20px) calc(100% - 20px), 50% 100%, calc(50% - 20px) calc(100% - 20px), 0 calc(100% - 20px));
  background: #fff url(https://source.unsplash.com/random/800x120) no-repeat 50% 50% /cover;
  pointer-events: none;

 /* the rest is only relevant for this snippet */

  height: 120px;
  margin-bottom: -20px;
  
}
.example > * {
  /* in case you place anything inside the header div */
  pointer-events: all;
  
}
.test {
  background-color: #777;
  min-height: 80px;
}

<div class="example"></div>
<div class="test"></div>

Considering the second element is a map, I assume you want the clicks on the overlapping area to go to the map, not to the header, so I added pointer-events:none to the header, reverting the property for its immediate children, so they respond to pointer actions.