How do I create a 'Parallelogram' shape in css with a straight side?

Question

I am trying to create a Parallelogram with a straight right side in css but so far I am struggling to achieve this.

I am using css ...

-webkit-transform: skew(-18deg);
-moz-transform: skew(-18deg);
-o-transform: skew(-18deg);

...to 'skew' the rectangle to create the Parallelogram.

I am wondering if the right side can be made straight?

Would it require :before and :after in the css?

Any help of this would be great.

Thanks,

Phil

Answer 1

You can achieve this by adding a triangle shaped element and positioning it next to the rectangular element.

Option 1: (Using the border hack)

In the example below, I have added a blue color for the triangular shape only to illustrate how the shape is achieved. Please replace the color in the below line to achieve the parallelogram with a slanted edge on one side and a straight edge on the other.

Change the below

border-color: transparent blue blue transparent;

to

border-color: transparent red red transparent;

Note: When using this method, it is difficult to add an extra outer border to the shape.

Snippet:

.trapezoid{
    position: relative;
    height: 100px;
    width: 100px;
    background: red;
    margin-left: 50px;
    color: white;
}
.trapezoid:after{
    position: absolute;
    content: '';
    left: -50px;
    top: 0px;
    border-style: solid;
    border-color: blue transparent blue transparent;
    border-width: 100px 0px 0px 50px;
}

<div class="trapezoid">Some dummy text</div>

---

Option 2: (Using skew)

.trapezoid{
    position: relative;
    height: 100px;
    width: 100px;
    background: beige;
    border: 1px solid red;
    border-left-width: 0px;
    margin-left: 50px;
}
.trapezoid:before{
    position: absolute;
    content: '';
    left: -25px;
    top: -1px;
    height: 100px;
    width: 50px;
    background: beige;
    border: 1px solid red;
    z-index: -1;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    transform: skew(20deg);
}

<div class="trapezoid">Some dummy text.</div>