《css揭秘》笔记（八），平行四边形和菱形的生成

平行四边形

我们可以使用skew()的变形属性来对矩形进行斜向拉伸。

.box1{
   
  width: 100px;
  height: 50px;
  margin: 20px;

  background-color: #0ffcc0;
  transform: skewX(45deg);
}

但是这会导致它的内部内容也会发生倾斜：

<div class="box1">HELLO</div>

以下提供解决方案

嵌套元素方案

可以对内容再应用一次反向的skew()变形，从而抵消容器变形的效果，但这意味着还需要再添加额外的一层HTML元素。

<div class="box2">
  <div>Hello</div>
</div