如何创建平行四边形div？

Question

我正在做一个项目，我必须创建类似于下图所示的东西。具体来说，带有文本的黄色平行四边形显示在红色矩形内（我不需要这个红色矩形）。如您所知，默认情况下的 div 是矩形

那么我的问题是，如何创建 3 个平行四边形 divs 或类似的东西？

如有任何建议或指南，我们将不胜感激

谢谢

PS：我不能使用图像作为背景，因为，如果您将 windows 变小，背景就不会跟随文本

Answer 1

试试这个 CSS 风格：

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

您可以选择自己的 class 名称而不是#parallelogram...

Answer 2

您可以使用负 SkewX 变换来获得所需的效果：

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

<div></div>

Answer 3

weinde 差不多有，但是有两个问题：需要设置display inline block，div的内容会歪斜。一个真正懒惰的方法是：

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

不过我觉得 unskew div 没必要。

您也可以尝试使用 css3 背景渐变。例如，将渐变应用于位于 3 个带有文本的元素后面的父 div。 http://www.quirksmode.org/css/images/angles.html

如何创建平行四边形div？

How to create parallelograms divs?

css

css-shapes