CSS实现平行四边形

要使用CSS创建一个平行四边形，你可以使用skew转换。以下是一个简单的例子：

HTML:




<div class="parallelogram"></div>

CSS:




.parallelogram {
  width: 150px;
  height: 100px;
  background-color: #3498db;
  transform: skew(-20deg);
  /* 为了更好的跨浏览器兼容性 */
  transform-origin: 0 0;
}

在这个例子中，.parallelogram 类创建了一个宽度为150像素、高度为100像素的平行四边形。transform: skew(-20deg); 属性使用 -20deg 的倾斜角度来创建平行四边形的视觉效果。transform-origin 属性设置变形的基点，默认为元素的中心，但在这里被设置为左上角（0 0），以确保平行四边形保持正确的形状。

CSS实现平行四边形

评论已关闭

推荐阅读