2017-07-21 89 views
2

我想根據形狀剪裁圖像,如下圖所示。
但我的代碼不能在IE中工作。
我怎樣才能讓它在IE中工作?css剪輯路徑形狀不工作,即我如何創建此與css

enter image description here

.svg-image { 
 
    background: url(http://r-ce.com/wp-content/uploads/2016/01/Driving-Classes-Deal1-1.jpg); 
 
    width: 320px; 
 
    height: 320px; 
 
} 
 

 
.svg-image { 
 
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 85%, 70% 92%, 51% 81%, 31% 90%, 0 87%, 0% 35%, 0 0); 
 
    clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 85%, 70% 92%, 51% 81%, 31% 90%, 0 87%, 0% 35%, 0 0); 
 
}
<div class="svg-image"><div>

View on CodePen

+0

我的代碼https://codepen.io/km_likhon/pen/zdOOLR –

+0

如果您在此處包含代碼的重要部分,則更有可能得到答案。請參閱[mcve]。 – Gary99

+0

[Internet Explorer和剪輯路徑]的可能重複(https://stackoverflow.com/questions/21904672/internet-explorer-and-clip-path) – showdev

回答

0

在此不IE支持。看到這個鏈接到CanIUse http://caniuse.com/#feat=css-clip-path

此外,這個線程雖然幾年前確實提供了一個使用SVG的可能解決方案。 clip-path svg polygon Internet explorer

還有一件事,如果你進入照相館或瘸子,你可以剪下圖像的那一部分,並使它成爲一個透明背景的PNG。那麼你就不用擔心在瀏覽器中這樣做了。雖然這是一個非常甜美的效果。