Can someone assist with making an image appear like this:
https://i.sstatic.net/J4DPp.jpg
I'm attempting to achieve this look using CSS:
https://i.sstatic.net/fuucK.png
I've experimented with skewing but the red area persists, regardless of the degree value used.
Here is my basic structure:
<div class="wrapper">
<div class="trapec">
<div class="image"></div>
</div>
</div>
For styling, I referred to this example: http://jsfiddle.net/mXLgF/477/
My CSS:
.wrapper {
width: 530px;
background: rgba(180, 180, 180, 0.7);
position: relative;
height: 230px;
}
.wrapper .trapec{
position: absolute;
left: 0;
width: 325px;
height: 100%;
overflow: hidden;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}
.wrapper .trapec .image {
width: 100%;
height: 100%;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
background: url("../img/news_img.jpg") no-repeat center / cover;
}
Despite trying various degree values, I cannot eliminate the persistent red line. Ask for guidance please.