How to create parallelograms divs? [duplicate]

问题

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

回答1:

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>

回答2:

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

回答3:

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...

来源：https://stackoverflow.com/questions/40386130/how-to-create-parallelograms-divs

标签

css

css-shapes