JSFiddle - React, Tailwind, and code Playground

by gergana

HTML

<div class="container">
    <div id="parallelogram">
        <div class="image"></div>
    </div>
</div>

CSS

.container{
    overflow:hidden;
}
#parallelogram {
    width: 150px;
    height: 100px;
    margin: 0 0 0 -20px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
    overflow:hidden;
    position:relative;
}
.image{
    background: url(http://placekitten.com/301/301);
    position:absolute;
    top:-30px;
    left:-30px;
    right:-30px;
    bottom:-30px;
        -webkit-transform: skew(-20deg);
       -moz-transform: skew(-20deg);
         -o-transform: skew(-20deg);
}