iframeまたはdivの透明な三角形

Question

問題が1つあります。私は自分のページにマップ付きのiframeを1つ含める必要があります。 そして、透明な背景でこのiframeに1つ（または2つ）の三角形が必要です。 私はこれを試しました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>

2番目の要素はマップで考えると、私はあなたが重複領域のクリックがマップに、ないヘッダに行きたいと仮定し、そこで私はpointer-events:noneをヘッダに追加し、その直下の子のプロパティを元に戻して、ポインタアクションに応答します。