如何创建平行四边形 div？ [复制]

Question

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

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

任何建议或指南将不胜感激

谢谢

PS：我不能使用图像作为背景，因为如果你把窗口做得更小，背景就不会跟随文字

Answer 1

你可以使用负SkewX变换来获得想要的效果：

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

<div></div>    

Answer 2

weinde 差不多了，但是有2个问题：需要设置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>

我觉得未倾斜的 div 是不必要的。

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

Answer 3

试试这个 CSS 样式：

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

#parallelogram 你可以选择你自己的类名...