Mask a div with css - html

Question

Here is my Fiddle : http://jsfiddle.net/4wd6vmjL/
I want to mask a div to show my image skew . but i dont want image to skew.
now there is a gap in mask and image can't fill all mask .
.mask{
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
height:200px;
-webkit-transform: skew(-16deg);
-moz-transform: skew(16deg);
-o-transform: skew(16deg);
transform: skew(16deg);
}
Any advice ? Thanks

Answer 1

You need to change your css of .mask class.
.wrapper{
display: block;
height:200px;
background: #f8f8f8 none repeat scroll 0 0;
text-align: left;
-webkit-transform: skew(-16deg);
-moz-transform: skew(-16deg);
-o-transform: skew(-16deg);
transform: skew(-16deg);
border-right:medium none;
margin-bottom: 26px;
margin-left: 44px;
overflow: hidden;
z-index: 100;
width:300px;
}
.mask {
background-image: url("http://www.birds.com/wp-content/uploads/home/bird4.jpg");
background-position: center top;
height: 480px;
transform: skew(16deg);
width: 430px;
padding-left: 70px;
}
<div class="wrapper">
<div class="mask">asdassadd</div>
</div>

Answer 2

Just add the image inside another div and counterskew it with the exact opposite. The hardest bit is positioning your div now, which would take some tweaking - depending on the angle your inside div needs to be bigger. I have also positioned it at the center of the wrapping div.
.mask {
position: relative;
left: 100px;
width: 200px;
height:200px;
overflow: hidden;
-webkit-transform: skew(-16deg);
-moz-transform: skew(-16deg);
-ms-transform: skew(-16deg);
transform: skew(-16deg);
}
.mask > * {
position: absolute;
left: 50%;
top: 50%;
width: 370px;
height:370px;
color: #fff;
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
-webkit-transform: skew(16deg) translate(-50%,-50%);
-moz-transform: skew(16deg) translate(-50%,-50%);
-ms-transform: skew(16deg) translate(-50%,-50%);
transform: skew(16deg) translate(-50%,-50%);
}
<div class="mask"><div>This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.</div></div>