CSS3ポリゴンのカットアウト部分ですが、内容は保持されますか？

Question

私はいくつかのコードがあります：あなたはそれの内のテキストで、その中の赤いCSS3ポリゴンで、これはグレーCSS3ポリゴンで、見ることができるように

:root { 
 
\t --main-color1: rgba(255,000,000,0.7); 
 
\t --main-colorB: rgba(000,000,000,0.3); 
 
\t 
 
\t --border-width: 5px; 
 
\t --arrow-width: 16px; 
 
} 
 

 
body { 
 
\t color: #FFFFFF; 
 
\t font-family: 'Franklin Gothic'; 
 
\t font-size: 20px; 
 
\t text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000; 
 
\t line-height: 50px; 
 
\t text-align: center; 
 
} 
 

 
.full { width: 1280px; margin: 0 auto; } 
 

 
.inline { display: inline-block; } 
 
.inner { -webkit-clip-path: inset(var(--main-border) 0); } 
 

 
.color1 { background-color: var(--main-color1); } 
 
.colorB { background-color: var(--main-colorB); } 
 

 
.match { 
 
\t text-transform: uppercase; 
 
\t min-width: 200px; 
 
\t -webkit-clip-path: polygon(
 
\t \t var(--arrow-width) 0, 
 
\t \t 0 50%, 
 
\t \t var(--arrow-width) 100%, 
 
\t \t calc(100% - var(--arrow-width)) 100%, 
 
\t \t 100% 50%, 
 
\t \t calc(100% - var(--arrow-width)) 0 
 
\t); 
 
} 
 
.match .inner { 
 
\t -webkit-clip-path: polygon(
 
\t \t calc(var(--arrow-width) + var(--border-width)) var(--border-width), 
 
\t \t calc(var(--border-width) + 3px) 50%, 
 
\t \t calc(var(--arrow-width) + var(--border-width)) calc(100% - var(--border-width)), 
 
\t \t calc(100% - var(--border-width) - var(--arrow-width)) calc(100% - var(--border-width)), 
 
\t \t calc(100% - var(--border-width) - 3px) 50%, 
 
\t \t calc(100% - var(--border-width) - var(--arrow-width)) var(--border-width) 
 
\t); 
 
}

\t \t <div class="match colorB inline"> 
 
\t \t \t <div class="inner color1"> 
 
\t \t \t \t <div class="title">Grand Finals</div> 
 
\t \t \t </div> 
 
\t \t </div>

を...

問題は、両方のポリゴンにアルファ透明度があることです。残念なことに、第2のポリゴンは第1のポリゴンの内側にあるので、結果として第2のポリゴンの色が変わります。最初のポリゴンを切り取って2番目のポリゴンの色を変えない方法がありますか？透明性を維持しながらも？

Answer 1

絶対配置された擬似要素を使用し、それらをクリップして境界線を作成し、下側のものを回転させます。ローテーションのために、::after要素では少し重複しています。先頭の要素を回転させるのではなく、リクエストパスに手動でクリップすることで修正できると思います。 `--main-border`が定義されている

:root { 
 
    --main-color1: rgba(255, 000, 000, 0.7); 
 
    --main-colorB: rgba(000, 000, 000, 0.3); 
 
    --border-width: 5px; 
 
    --arrow-width: 16px; 
 
} 
 
body { 
 
    color: #FFFFFF; 
 
    font-family: 'Franklin Gothic'; 
 
    font-size: 20px; 
 
    text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000; 
 
    line-height: 50px; 
 
    text-align: center; 
 
} 
 
.full { 
 
    width: 1280px; 
 
    margin: 0 auto; 
 
} 
 
.inline { 
 
    display: inline-block; 
 
} 
 
.inner { 
 
    -webkit-clip-path: inset(var(--main-border) 0); 
 
} 
 
.color1 { 
 
    background-color: var(--main-color1); 
 
} 
 

 
.match { 
 
    position: relative; 
 
    text-transform: uppercase; 
 
    min-width: 200px; 
 
} 
 
.match::before, 
 
.match::after { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: var(--main-colorB); 
 
    -webkit-clip-path: polygon(var(--arrow-width) 0, 0 50%, calc(var(--border-width) + 4px) 50%, calc(var(--arrow-width) + var(--border-width) + 1px) var(--border-width), calc(100% - var(--arrow-width) - var(--border-width)) var(--border-width), calc(100% - var(--border-width) - 3px) 50%, 100% 50%, calc(100% - var(--arrow-width)) 0); 
 
    content: ''; 
 
} 
 
    
 
    .match::before { 
 
    } 
 
    
 
    .match::after { 
 
    transform: rotate(180deg); 
 
    } 
 
.match .inner { 
 
    -webkit-clip-path: polygon(calc(var(--arrow-width) + var(--border-width)) var(--border-width), calc(var(--border-width) + 3px) 50%, calc(var(--arrow-width) + var(--border-width)) calc(100% - var(--border-width)), calc(100% - var(--border-width) - var(--arrow-width)) calc(100% - var(--border-width)), calc(100% - var(--border-width) - 3px) 50%, calc(100% - var(--border-width) - var(--arrow-width)) var(--border-width)); 
 
}

<div class="match inline"> 
 
    <div class="inner color1"> 
 
    <div class="title">Grand Finals</div> 
 
    </div> 
 
</div>