iframe或div上的透明三角形

Question

我有一个问题。我需要在我的页面中添加一张带有地图的iframe。 我需要在这个iframe上有一个（或两个）三角形的透明背景。 我试过这个solution，但它不起作用。 我怎么能意识到它？

Answer 1

你想要达到的目的是通过裁剪箭头形状的图像并给它一个负边距来完成，这样下面的元素就会与标题图像重叠。

概念证明：

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

考虑到第二个元素是一个地图，我假设您希望重叠区域的点击次数转到地图，而不是标题，因此我将pointer-events:none添加到标题中，将其恢复为属性孩子，所以他们回应指针行动。