夾路徑：黑色背景而不是透明

Question

我使用clip-path產生在我的div元素

.nav 
{ 
    -webkit-clip-path: polygon(0 6%, 50% 0%, 100% 5%, 100% 100%, 0 100%); 
    clip-path: polygon(0 6%, 50% 0%, 100% 5%, 100% 100%, 0 100%); 
} 

的一個有點曲線正如你可以看到，有一個黑色的背景在邊界上，但我已將它設置爲透明。如果我將顏色更改爲紅色，則黑色背景將變爲紅色。我現在的問題是：我如何使用透明背景？

Answer 1

而不是使用clip-path其中有少瀏覽器支持的請嘗試使用pseud-elements

body { 
 
    background: url('https://placeimg.com/500/500/any'); 
 
    background-size: cover; 
 
} 
 
.nav { 
 
    width: 100%; 
 
    height: 200px; 
 
    position: relative; 
 
    overflow:hidden; 
 
    text-align:center; 
 
    color:#fff; 
 
    line-height:200px; 
 
    font-size:26px; 
 
} 
 
.nav:after { 
 
    position: absolute; 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: -50%; 
 
    top: 0; 
 
    background: #00CCFF; 
 
    transform-origin: 100% 100%; 
 
    transform: rotate(5deg); 
 
    z-index:-1; 
 
} 
 
.nav:before { 
 
    position: absolute; 
 
    content: ""; 
 
    width: 100%; 
 
    height:100%; 
 
    top:0; 
 
    left: 50%; 
 
    background: #00CCFF; 
 
    transform-origin: 0% 100%; 
 
    transform: rotate(-5deg); 
 
    z-index:-1; 
 
}

<div class="nav">Moin</div>

Answer 2

櫃面，如果你想使用剪輯路徑的方法，你可以試試這個，

http://codepen.io/jinukurian7/pen/VvqROX

h1, 
 

 
.description { 
 

 
    text-align: center; 
 

 
    margin: 5px 0; 
 

 
} 
 

 
/** The Clip Box **/ 
 

 
.content { 
 

 
    position: absolute; 
 

 
    margin: auto auto; 
 

 
    top: 0; 
 

 
    right: 0; 
 

 
    bottom: 40px; 
 

 
    left: 0; 
 

 
    width: 500px; 
 

 
    height: 100px; 
 

 
    padding: 20px; 
 

 
    background: #3498db; 
 

 
    -webkit-clip-path: polygon(0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px)); 
 

 
    clip-path: polygon(0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px)); 
 

 
    -webkit-transition: all 200ms; 
 

 
    transition: all 200ms; 
 

 
}

<div class="content"> 
 
    <h2>Clip-Path Example</h2> 
 
</div>