How to create parallelograms divs?

Question

I am working on a project where I have to create something similar what is showing in the image below. Concretely, the yellow parallelograms with text that are showing inside the red rectangular (I dont need this red rectangular). As you know the divs by default are rectangular

So then my question is, how could create 3 parallelogram-divs or something similiar?

Any advices or guidelines would be appreciated

Thanks

PS: I cannot use a image as background because, If you do the windows smaller the backround doesn't follow the text

Some possible methods with CSS: http://stackoverflow.com/q/31626183/3597276 — Michael Benjamin, Nov 02 '16 at 18:13
flex and gradient makes it easy also ...:) http://codepen.io/gc-nomade/pen/QGWEjg — G-Cyrillus, Nov 03 '16 at 21:56

score 21 · Accepted Answer · answered Nov 02 '16 at 17:32

21

You can use the negative SkewX transform to get the desired effect:

div {
  margin: 20px;
  width: 200px;
  height: 100px;
  display: inline-block;
  background: yellow;    
  border: 1px solid black;
  transform: skewX(-10deg);
  }

<div></div>

answered Nov 02 '16 at 17:32

Shomz

37,421
4
57
85

3

This was perfect for my project except that we did not desire the content inside the div to be slanted. In order to keep the content unslanted so only the background (& border) is slanted, I added a css rule for `div::before` with `content: ""; display: block; position: absolute; top: 0; left: 0;` and the height and width and background color. Don't forget to `z-index: 1` the `div` itself and `z-index: -1` the `div::before`. Cheers! – Chad Oct 22 '18 at 19:43
Yeah, there are a couple of ways to do that: like having this div only as a background, and adding the content as its sibling (which is how you example `div:before` behaves); or unskewing the content container, etc. – Shomz Oct 22 '18 at 21:54

score 2 · Answer 2 · answered Nov 02 '16 at 17:46

weinde almost has it, but 2 problems: You need to set display inline block, and the contents of the div will be skewed. A really lazy way to do this would be:

.para {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
display: inline-block;
vertical-align: top;
}
.unskew {
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}

<div class="para"><div class="unskew">stuff</div></div>
<div class="para">stuff 2</div>

I feel like the unskew div is unnecessary though.

You could also try playing with css3 background gradients. Apply the gradient to a parent div sitting behind the 3 elements with text, for example. http://www.quirksmode.org/css/images/angles.html

score -1 · Answer 3 · answered Nov 02 '16 at 17:31

-1

Try this CSS style:

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

insted of #parallelogram you can chose your own class name...

answered Nov 02 '16 at 17:31

weinde

1,074
3
13
32

4

for this you would need skew 170 and it would probably help to tell him you got this from https://css-tricks.com/examples/ShapesOfCSS/ so he can explore it a bit – scrappedcola Nov 02 '16 at 17:33
thanks for adding this... wrote my anwser in a hurry... – weinde Nov 02 '16 at 17:35

How to create parallelograms divs?

3 Answers3