Skew design with Css

Question

Here is my fiddle : http://jsfiddle.net/WRFx7/4/

.border{
    border-width: 0 0 60px 100vw; /* Or use: 0 0 60px 100vw   to invert! */
    border-style: solid dashed;
}
.border.top{    border-color: #D44032 transparent; }
.border.bottom{ border-color: transparent #D44032; }

Can i use image instead of border ? i want to achieve something like this :

Or any solution would be great , thanks in advance

I'm rather confused as to what's actually skewed in your image. Could you not achieve that with a normal `img` tag or `background-image`? — jaunt, Sep 13 '15 at 10:41

score -1 · Answer 1 · edited May 23 '17 at 10:26

This was answered before:
Post: CSS3 Transform Skew One Side
Fiddle: http://jsfiddle.net/diegoh/mXLgF/1154/

HTML:

<div class="container">
<div id="parallelogram">
    <div class="image"></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);
}

Skew design with Css

1 Answers1