mozilla的剪輯路徑多邊形不能正常工作

Mozilla是否可以實現給定的樣式？我用夾路徑在CSS但是當我試圖測試它mozila夾路徑不工作mozilla的剪輯路徑多邊形不能正常工作

enter image description here

2016-06-09 PritoNito

尚未支持（實現在進步，雖然），可以實現與SVG clipPath相同，但。 –

我試圖使用SVG，但我無法達到確切的樣式 – PritoNito

這是我發現的SVG的代碼，但我無法調整它充滿和全高：（ – PritoNito

Firefox有部分支持僅支持clip-path: url()語法。因此，要在FF中完成這項工作，您可以使用內聯svg並定義clipPath以用作url。確保將clipPath上的clipPathUnits屬性設置爲objectBoundingBox，然後clipPath的內容使用該元素的邊界框。

下面是一個例子。

body { 
 
    margin: 0; 
 
} 
 

 
ul.wrapper { 
 
    position: relative; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul.wrapper > li { 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.clip { 
 
    -webkit-clip-path: polygon(25% 0, 100% 0%, 100% 100%, 75% 100%); 
 
    clip-path: polygon(25% 0, 100% 0%, 100% 100%, 75% 100%); 
 
    -webkit-clip-path: url("#clipping"); 
 
    clip-path: url("#clipping"); 
 
}

<ul class="wrapper"> 
 
    <li> 
 
    <img src="http://placehold.it/512x288/3498db/f1f1f1" alt=""> 
 
    </li> 
 
    <li> 
 
    <img class="clip" src="http://placehold.it/512x288/e67e22/f1f1f1" alt=""> 
 
    </li> 
 
</ul> 
 

 
<svg width='0' height='0'> 
 
    <defs> 
 
    <clipPath id="clipping" clipPathUnits="objectBoundingBox"> 
 
     <polygon points="0.25 0, 1 0, 1 1, 0.75 1" /> 
 
    </clipPath> 
 
    </defs> 
 
</svg>

來源

2016-06-09 08:22:59 DavidDomain

mozilla的剪輯路徑多邊形不能正常工作

回答

相關問題