The million dollar question is this: Is masking possible with css?

The most basic way to do it is with the clip css property. The possible values are auto | inherit | shape | initial . We are interested in the shape value, but the funny part is that it has only 1 choice and that is rect (rectangular shape). The syntax is rect(top right bottom left) but the usage is not that straightforward. The one thing you should keep in mind is that the top and bottom parameters are relative to the top section of the element and the left and right parameters are relative to the left side of the element. The below picture illustrates this:

This means that the bottom parameter is actually the distance/offset from the top of the element and the right parameter is the distance from the left side of the element instead of the right side.

Note: The clipping area is the visible area of the image and what falls out of this area is the hidden part.

But what if we want to use some other shapes, like a triangle shaped clipping or circle shaped clipping. Clip-path comes to our rescue with it’s custom shapes.

Clip-path brought some new shapes in the picture besides rectangle and these are:

  • circle(cx, cy, r) – circle(position and radius)
  • ellipse(cx, cy, rx, ry) – ellipse(position and radius x and y)
  • polygon(x1 y1, x2 y2, xn yn) – polygon (multiple horizontal and vertical points)

If you would like something more abstract, more complex you can use the the clip-path with a url pointing to an svg. Of course that is conditioned by your SVG knowledge.
Firefox supports only the url syntax for clip-path ! so for greater support we need to dive into svg.

clip-path: url(#path1);

Note: This id has to exist in the html on an inline svg code, so it’s not pointing to an external svg file.

So let’s suppose the client wants a triangle shaped clipping in the corner of a div.The background can change, so it’s dinamic, we don’t have access to it, so we can’t just do this from photoshop cutting the upper-left part of the image in triangle shape and saving as png. We have to do this in a dynamic manner.

For Firefox users I will serve the first example:

So we used the url syntax here like this #container { clip-path: url(#clipped1) }

Also the inline svg looks like this:

 	 	 
   	 	 
      	 	 
   	 	 
 

For the rest of browsers (chrome, opera):

body {
    background:url(http://thecsscoder.com/blog/blog-images/landscape.jpg) no-repeat 0 0;
    padding:100px 50px;
    margin:0;
    background-attachment:fixed;
    overflow:hidden /*this row is only for illustration purposes, you can exclude it*/
}
#container { 
   -webkit-clip-path: polygon(0 80px,100px 0, 100% 0, 100% 100%,0 100%);
   position:fixed;
   width:540px;
   height:300px
}
#container .inner {
    background:url(http://thecsscoder.com/blog/blog-images/dog.jpg) no-repeat 0 0;  
    overflow:scroll;
     width:540px;
     height:100%;
     color:#fff;
     padding:50px
}

An interesting effect would be a fixed positioned content, that when the page is scrolled the clipping is moving up and down on the content.First the clipping mask to move you need to scroll the body not the content.

body {
    background:url(http://thecsscoder.com/blog/blog-images/landscape.jpg) no-repeat 0 0;
    padding:100px 50px;
    margin:0;
    background-attachment:fixed;

}
#container { 
    width:540px;
    height:1700px;  
    -webkit-clip-path: polygon(0 40%,100px 35%, 0 30%,0 0,100% 0, 100% 100%, 0 100%,0 30%);

}
#container .inner {
    border:1px solid red;    
    width:540px;
    color:#fff; 
    position:fixed   
}
#container .inner .box { 
    background:url(http://thecsscoder.com/blog/blog-images/dog.jpg) no-repeat 0 0;  
    padding:50px;
    overflow:scroll;
    height:300px;     
}

Now we switched a little bit the situation. The clipping mask is fixed and the content is moving on scroll, this way it is hiding different sections of the scrolled content when scrolled.

body {
    background:url(http://thecsscoder.com/blog/blog-images/landscape.jpg) no-repeat 0 0;
    padding:100px 50px;
    margin:0;
    background-attachment:fixed;

}
#container { 
    width:540px  
    position:fixed;
    padding:0;
    -webkit-clip-path: polygon(0 60%,100px 50%, 0 40%,0 0,100% 0, 100% 100%, 0 100%,0 60%);
}
#container .inner {
    height:400px;
    overflow:scroll;
     color:#fff; 

}
#container .inner .box { 
   background:url(http://thecsscoder.com/blog/blog-images/dog.jpg) no-repeat 0 0;  
   background-size:cover;
   padding:50px    
}

The clip-path property enjoys a wide browser support. For IE9+ you need to add an inline svg to get the same result, but that would assume using foreignObject SVG tag.


   	 	 
      ....here comes the shape you want to use as a mask...
   	 	 
   	 	 
      
         
Lorem ipsum

I will stop here with this article, even if I wanted to include color clipping, but then this would get too long. Stay tuned, because all is not lost that is delayed.