CSS：使用Mask作爲Webkit-Mask-Image的後備

所以我一直試圖將背景圖片剪成四捨五入的六角形，並且我發現了webkit的令人驚歎的蒙版圖像，可以非常輕鬆地解決我所有的問題。可悲的是，它只適用於Chrome和Safari（當然）。CSS：使用Mask作爲Webkit-Mask-Image的後備

我該如何構建非Webkit瀏覽器的SVG掩碼回退？是否有可能在我的images文件夾中使用.svg文件作爲掩碼，或者它是否必須在html文檔的svg標籤中定義？

這裏的的jsfiddle我什麼都爲： http://jsfiddle.net/fbB3P/

CSS：

.hexagon { 
    position: relative; 
    display: inline-block; 
    width: 205px; 
    height: 233px; 
    overflow: hidden; 
    color: #fff; 
    -webkit-mask-image: url('http://i40.tinypic.com/kajqg.jpg'); 
    text-align: center; 
} 

.hexagon .content { 
    height: 186px; 
    width: 186px; 
    margin: auto; 
    margin-top: 16px; 
} 

.hexagon a { 
    cursor: -webkit-zoom-in; 
    cursor: -moz-zoom-in; 
}

HTML：

<div class="hexagon" style="background: url('https://s3.amazonaws.com/images.dailydabbles.com/artwork/skull-link5243b4c783a87-crop-260x260-medium.png');"> 
    <a href="#skullkid"> 
     <div class="content"></div> 
    </a> 
</div>

來源

2013-10-05 div

太糟糕了，遮蔽了awful support。

我使用:before和:after僞元素創建了一種替代掩碼方法。

jsFiddle demo here - 更好的跨瀏覽器支持。

HTML

<div class="hex"></div>

CSS

.hex { 
    width: 205px; 
    height: 233px; 
    position: relative; 
    background: url('https://s3.amazonaws.com/images.dailydabbles.com/artwork/skull-link5243b4c783a87-crop-260x260-medium.png'); 
} 

.hex:before { 
    content: ""; 
    width: 0; 
    height: 0; 
    border-bottom: 60px solid transparent; 
    border-left: 103px solid white; 
    border-right: 102px solid white; 
    position: absolute; 
} 

.hex:after { 
    content: ""; 
    width: 0; 
    position: absolute; 
    bottom: 0px; 
    border-top: 60px solid transparent; 
    border-left: 103px solid white; 
    border-right: 102px solid white; 
}

來源

2013-10-05 19:58:53

這是偉大的，我有我的探索CSS選項。但我的問題在於，圓角似乎很難實現，Chrome在對角線兩側留下鋸齒狀邊緣。 – div

@div是的 - 我知道，你是對的。這就是我能想到的。 –

@JoshC完全拯救了我的生命，謝謝 – destan

CSS：使用Mask作爲Webkit-Mask-Image的後備

回答

相關問題