How to Create a 'Parallelogram' Shape in CSS with a Straight Side

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

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>

How can I make a similar shape to a parallelogram in css?

You could try using a border-left with transparent as the color and abandon the *-transform's altogether. This would require a CSS change but no additional HTML markup:

Current Angle:

#parallelogram {    width: 250px;    height: 0;    border-bottom: 100px solid red;    border-left: 30px solid transparent;    margin-left: 10px;}

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

Make a parallelogram with one side in CSS3

UPDATE:

Here is an example and the result code: jsFiddle.

<style type="text/css">
#trapezoid {
    height: 0;
    width: 100px;
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
</style>
<div id="trapezoid"></div>

This will create a trapezoid.

Or this:

<style type="text/css">
#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}
</style>
<div id="parallelogram"></div>

This will create a parallelogram

Here is an article about creating all kinds of shapes with CSS only and a single HTML element. It's a very interesting way for creating every shape from a triangle to a star.

The Shapes of CSS

Rectangle with two cut edges

You can do it using pseudo-elements like below. The approach is to cut out a triangle shape from the left-bottom and top-right of the box. This method can be used with either a solid color an image inside the shape as long as the body background is a solid color. When the body background is a non-solid color this approach will not work because the border hack needs a solid color background.

The advantage of this method is that it can support cuts of different angles at each side (like in the question where the hypotenuse of the triangular cut on either side are not parallel to each other).

div {  background: red;  width: 200px;  height: 100px;  position: relative;}div:before {  position: absolute;  height: 0;  width: 0;  content: ' ';  border: 20px solid white;  border-color: transparent transparent white white;  border-width: 20px 0px 0px 15px;  left: 0;  top: 80px;}div:after {  position: absolute;  height: 0;  width: 0;  content: ' ';  border: 20px solid white;  border-color: white white transparent transparent;  left: 170px;  top: 0px;}.with-img {  background: url(http://lorempixel.com/100/100);}

<div></div><br><div class="with-img"></div>

CSS3 draw Trapezoid or Parallelogram with one rectangular side

You could use the <div> container (could be a <span> or a <p> either) and draw the borders via background gradients like this.

You can not generate pseudo-element from input.

div {
  display:inline-block;
  position:relative;
  padding-left:1em;
  background:
    linear-gradient(
      135deg, transparent 0.85em, red 0.85em, red 0.95em, transparent 0.95em) top right no-repeat,
    linear-gradient(to left, red, red) 1.2em top no-repeat,
    linear-gradient(to left, red, red) bottom left no-repeat,
    linear-gradient(to bottom, red, red) top right no-repeat;
  background-size: 100% 1.2em, 100% 0.1em, 100% 0.1em, 0.1em 100%;
}
div:after {
  content:'';
  position:absolute;
  top:100%;
  right:0;
  height:0.5em;
  width:1em;
  background:
    linear-gradient(
      -24deg, transparent 0.43em, red 0.43em, red 0.55em, transparent 0.5em) top right no-repeat;
  border-left:0.15em red solid;
}
input {
  background:none;
  border:none;
}

@ See Fiddle

CSS trapezoid shape with text

If the width/height of the trapezoid shape should be changed dynamically, you could achieve the effect by using CSS transforms as follows:

.box {  width: 300px;        /* optional - feel free to remove it */  /* height: 150px; */ /* optional - feel free to remove it */  position: relative;  padding: 5px;}
.box:before {  content: "";  position: absolute;  border: 3px solid teal;    top: -4%; bottom: -11%; left: -3%; right: -3%;  z-index: -1;
  -webkit-transform: perspective(50em) rotateX(-30deg);  transform: perspective(50em) rotateX(-30deg);}

<div class="box">  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus sed unde voluptate non temporibus quae amet possimus dolorum quisquam atque nemo reprehenderit quasi suscipit vero cum delectus quibusdam optio asperiores.</div>

CSS3 Transform Skew One Side

Try this:

To unskew the image use a nested div for the image and give it the opposite skew value. So if you had 20deg on the parent then you can give the nested (image) div a skew value of -20deg.

.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);}

<div class="container">  <div id="parallelogram">    <div class="image"></div>  </div></div>

---

Related Topics