vanloc vanloc - 26 days ago 7
CSS Question

Keep image not rotation when skew?

I want to cut small element in an image. So, I am using

skew
to do this.

But when to skew, the image seems broken, I want to keep image is not rotation.

My code like this:



.image-skew{
/* transform: skewX(-25deg); */
position: absolute;
width: 100%;
height: auto;
}

.img-skew-invest {
transform: skewX(-25deg);
display: flex;
}

<div class="image-skew">
<img class="img-skew-invest" src="http://thebusiness.vn/uploads/business360/chuyenkinhdoanh/lazada-co-noi-got-foodpanda-roi-khoi-viet-nam/lazada-co-noi-got-foodpanda-roi-khoi-viet-nam.png" alt="" style="width: 100%; height: auto"/>
</div>





Same image.

I cut an element of the picture with skew, but it should be a not rotation.

enter image description here

Answer

clip-path will match your requirement:

.image-skew {
-webkit-clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0% 25%);
clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0% 25%);
}

Try it yourself: https://jsfiddle.net/hgzsr5f5/1/ or try clip-path generator: http://bennettfeely.com/clippy/