css平行四边形画法

CSS是前端开发的重要组成部分之一，它不仅可以控制网页的布局和样式，还可以实现一些抽象的视觉效果。其中，平行四边形是一种比较常见的视觉效果。

.parallelogram {
      width: 200px;
     /* 设置宽度 */  height: 100px;
     /* 设置高度 */  background-color: #9c27b0;
     /* 设置背景色 */  transform: skew(-30deg);
     /* 设置倾斜度 */  margin: 20px;
 /* 设置外边距 */}

上述代码实现了一个宽度为200px，高度为100px的紫色平行四边形。具体来说，我们通过transform属性的skew函数将元素沿着X轴倾斜了30度。这个skew函数接受两个参数，第一个参数表示X轴倾斜度，第二个参数表示Y轴倾斜度。我们只设置了X轴倾斜度，所以第二个参数默认为0。

另外，由于我们的容器是平行四边形，所以它的宽度和高度并不是我们期望的大小。因此，我们需要在布局时进行一些调整，让其适应我们的需求。例如，我们可以在元素外部增加一层容器，并设置padding值来控制元素的大小。

.container {
      width: 240px;
      height: 120px;
      padding: 10px;
}
.parallelogram {
      width: 100%;
     /* 设置宽度为父容器宽度 */  height: 100%;
     /* 设置高度为父容器高度 */  background-color: #9c27b0;
      transform: skew(-30deg);
      margin: auto;
 /* 水平居中 */}
    

上述代码中，我们在外部增加了一个名为.container的容器，并设置了它的宽度和高度。在内部的.parallelogram元素中，我们设置宽度和高度为100%，让它充满整个.container容器。这样，我们就可以控制平行四边形的大小了。

需要注意的是，由于我们使用的是transform属性来实现平行四边形的效果，所以在浏览器兼容性方面需要多加关注。特别是一些旧版的IE浏览器，可能不支持这个属性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！