CSS3多邊形的剪切部分，但保留內容？

Question

我有一些代碼：

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

正如你可以看到，這是一個灰色的CSS3多邊形，與它內部的紅色CSS3多邊形，與這裏面的文字...

我遇到的問題是兩個多邊形都有alpha透明度。不幸的是，因爲第二個多邊形位於第一個多邊形的內部，所以它會改變第二個多邊形的結果顏色。有沒有辦法切出第一個多邊形區域，以便它不會改變第二個多邊形的顏色？同時還保持透明度？

Answer 1

使用絕對定位的僞元素，並剪切它們以創建邊框，並旋轉底部。由於旋轉，與::after元素有一個小的重疊，我認爲您可以通過手動裁剪到請求路徑而不是旋轉頂部元素來修復。

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