маскировать DIV с CSS

Question

Вот мой Fiddle: http://jsfiddle.net/4wd6vmjL/

Я хочу, чтобы замаскировать DIV, чтобы показать мое изображение перекоса. но я не хочу, чтобы изображение исказилось.

сейчас есть пробел в маске, и изображение не может заполнить всю маску.

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

Любой совет? Спасибо

Answer 1

Вам необходимо изменить свой css .mask класс.

.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

Просто добавьте изображение в другой DIV и counterskew его с точностью до наоборот. Самый сложный бит теперь позиционирует ваш div, что потребует некоторой настройки - в зависимости от угла, в котором ваш внутренний div должен быть больше. Я также позиционировал его в центре оберточного 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>