javascript - iframe 或 div 上的透明三 Angular 形

Question

我有一个问题。我需要在我的页面中包含一个带有 map 的 iframe。 我需要在这个 iframe 上放置一个(或两个)具有透明背景的三 Angular 形。 我试过这个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>

考虑到第二个元素是 map ，我假设您希望重叠区域上的点击转到 map ，而不是标题，因此我将 pointer-events:none 添加到标题，恢复其直接子级的属性，以便它们响应指针操作。