You're here: Home » CSS » CSS Parallelogram Shape

CSS Parallelogram Shape

On Dec 2, 2011 under CSS

Make Parallelogram with CSS3. Just a 20 degree shift gives the required parallelogram. It’s built with pure CSS. Check it below.

Parallelogram

Demo

CSS

.parallelogram-shape {
    width: 160px;
    height: 80px;
    background: #dd8863;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
    margin: 20px;
}

HTML

<div class="parallelogram-shape"></div>

Related Posts

  • CSS Heart Shape
  • CSS Page Curl Shadows
  • CSS Star Shape (12 Point Star)
  • CSS Octagon Shape
  • CSS Star Shape (6 Point Star)

    • Comments on this entry (4 comments)

    Did you like this post? You can share your opinion with us! Simply click here.

    1. Adam says:
      December 7, 2011 at 21:46

      Thanks for that CSS , very useful.
      Adam recently posted..Cool Sketches To Draw

      Reply
    2. PSD to Wordpress says:
      December 7, 2011 at 23:59

      Come with us at Psd to wordpress is a professional service .Here we offer our valuable services in PSD to

      WordPress theme coding. Our process usually consists of three steps: you provide your PSD file with all the

      creative work,We will do the technical conversion process for you, if satisfied with the demo the final result

      will be send to you.psd to wordpress coding $99

      Reply
    3. NS Mukundan says:
      January 17, 2012 at 18:28

      nice css hack. thanks for the share :)
      NS Mukundan recently posted..Celandine Corn Remover

      Reply
    4. ramzes says:
      February 14, 2012 at 21:34

      If I’ll put image in this shape it will be without skew?

      Reply

    Leave a Reply

    CommentLuv badge