HTML多邊形翻轉它周圍的其他方法

Question

嗨，我有一個HTML多邊形，這是我的代碼：

<div class="full-background"> 
     <div class="diag"> 
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"> 
    <polygon points="100 0 100 10 0 10" /> 
    </svg> 
    <img src="assets/img/downarrow.png" alt="" /> 
</div> 
    </div> 

這將產生：

其實我是想這周圍的其他方法，使黑色部分是藍色的，藍色部分是透明的。我找不到一種方法來編輯黑色部分的顏色，我甚至嘗試改變bodys bg顏色。

這裏是我的CSS：

.diag { 
    position: absolute; 
    bottom:0; 
    width:100%; 
} 
svg { 
    display: block; 
    width: 100%; 
    height: 20vh; 
    background: #38aae1; 

} 

img { 
    height: 50px; 
    position: absolute; 
    top: 0; bottom: 0; 
    left: 0; right: 0; 
    margin: auto; 
    background: #ef7d00; 
    border-radius: 50%; 
    padding: 10px; 

} 

誰能幫助？謝謝。

Answer 1

添加fill屬性polygon和改變的backgroundsvg變爲透明。

看一看片斷如下（使用全屏幕更好的視野，忽略箭頭的佔位符圖片）：

.diag { 
 
    position: absolute; 
 
    bottom:0; 
 
    width:100%; 
 
} 
 
svg { 
 
    display: block; 
 
    width: 100%; 
 
    height: 20vh; 
 
    background: transparent; 
 
} 
 

 
svg polygon { 
 
    fill: #38aae1; 
 
} 
 

 
img { 
 
    height: 50px; 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 0; right: 0; 
 
    margin: auto; 
 
    background: #ef7d00; 
 
    border-radius: 50%; 
 
    padding: 10px; 
 

 
}

<div class="full-background"> 
 
     <div class="diag"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"> 
 
    <polygon points="100 0 100 10 0 10" /> 
 
    </svg> 
 
    <img src="http://placehold.it/10x10" alt="" /> 
 
</div> 
 
    </div>

希望這有助於！

Answer 2

設置多邊形填充，以藍色和SVG的背景設置爲黑色，在CSS：

svg{ 
    background: black; 
} 

和您的SVG：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"> 
    <polygon points="100 0 100 10 0 10" fill="#38aae1"/> 
</svg>