CODEWITHSUNDEEP
csshtmlsvgwebkit
div
div

Reputation: 187

CSS: Using Mask as a fallback for Webkit-Mask-Image

So I've been trying to clip background images to a rounded hexagon shape, and I found webkit's amazing mask image that solves all of my problems extremely easily. Sadly, it only works in Chrome and Safari (of course).

How could I build in a fallback to a SVG mask for non webkit browsers? And is it possible at all to use a .svg file from my images folder for the mask or does it HAVE to be defined within a svg tag in the html document?

Here's a JSFiddle of what I'm going for: 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>

Upvotes: 2

Views: 3183

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240948

Too bad masking has awful support.

I created an alternative way of masking, taking advantage of the :before and :after pseudo elements.

jsFiddle demo here - way better cross-browser support.

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;
}

Upvotes: 2

Related Questions