iframe或div上的透明三角形

.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>