How to make a parallelogram on one side in CSS?

Question

I am trying to make a parallelogram in CSS, where only one side is not straight, but I can only get it to do both sides at the moment, like:

#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
   -moz-transform: skew(20deg);
     -o-transform: skew(20deg);
background: red;
}

Which displays the bent side on the left and right. I need it only on the right.

How does one do this?

Related - http://stackoverflow.com/questions/19761202/css3-transform-skew-one-side — Paulie_D, Jul 06 '16 at 12:16

Pepo_rasta · Answer 1 · 2016-07-06T12:19:03.890

try using wrapper with overflow: hidden; and negative margin, it will just hide left skewed side

#parallelogram {
  width: 150px;
  height: 100px;
  -webkit-transform: skew(20deg);
     -moz-transform: skew(20deg);
       -o-transform: skew(20deg);
  background: red;
  margin-left: -19px; /* (tangens(20deg)*100px)/2 */
}
#wrapper{
  overflow: hidden;
}

<div id="wrapper">
  <div id="parallelogram"></div>
</div>

score 2 · Answer 2 · answered Jul 06 '16 at 12:30

2

Instead of using skew and degrees you can simply play with borders like:

#parallelogram {
 border-bottom: 100px solid red;
 border-right: 50px solid transparent;
 width: 100px;
}

<div id="parallelogram"></div>

answered Jul 06 '16 at 12:30

Theodore K.

5,058
4
30
46

That isn't working for me. I'm trying to do this on anchor tags. This results in them just being a big square and the text inside breaking on to new lines, because the border is pushing it. – JWDev Jul 07 '16 at 09:37
@JWDev put a relevant piece of your html code in the question (to have something to work with) and I'll try my best ;-) – Theodore K. Jul 07 '16 at 09:45

score 0 · Answer 3 · answered Aug 04 '16 at 01:14

You can use the matrix3d() CSS transform, which has good browser support (IE10+). Testing a little with this codepen example gives us an example like this:

transform-origin: 0 0 0;
transform: matrix3d( 0.66,  0,     0,     0,
                    -0.51,  0.66,  0,    -0.0017,
                     0,     0,     1,     0,
                   102,     0,     0,     1 );

<img src="http://www.fillmurray.com/300/200" alt="" style="transform-origin: 0 0 0; transform: matrix3d(0.66, 0, 0, 0, -0.51, 0.66, 0, -0.0017, 0, 0, 1, 0, 102, 0, 0, 1);" >

How to make a parallelogram on one side in CSS?

3 Answers3