JSFiddle - React, Tailwind, and code Playground

HTML

<div class="q-item"></div>
<br><a> how to set transform for div without effect on objects on this element and whiteout effect at this background? how to set background for top object like this under object?</a>

<div class="no-item"></div>

CSS

.q-item {
    width: 180px;
    height: 132px;
    float: left;
    margin-left: 58px;
    padding-right: 1%;
    border: 2px solid #1D2A3D;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
}
.q-item::before {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    background:url('http://jsfiddle.net/img/logo.png') no-repeat no-repeat 33px 1px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -ms-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
}
.no-item {
    width: 180px;
    height: 132px;
    background:url('http://jsfiddle.net/img/logo.png') no-repeat no-repeat 13px 1px;
    float: left;
    margin-left: 58px;
    padding-right: 1%;
    border: 2px solid #CCC;
}
body {
    background:#686868;
}
a {
    padding:10px;
    color:blue;
    float:left;
    margin-left:30px;
}
}