iframe或div上的透明三角形

  • Z时代
  • 2024-01-10
  • 分类：问答

我遇到了一个问题。我需要将包含地图的iframe包含到我的页面中。 而且我需要一个（或两个）三角形覆盖此iframe并具有透明背景。 我试过这个solution，但它没有工作。 我怎样才能认识到它？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>

考虑第二个元素是一个地图，我假设你想在重叠区域上的点击去地图，而不是头，所以我将pointer-events:none添加到头文件中，为其直接子节点恢复属性，以便它们响应指针动作。

以上是 iframe或div上的透明三角形 的全部内容， 来源链接： utcz.com/qa/258526.html

回到顶部