[分享]css3怎样使图形倒下

CSS3是前端开发中常用的技术之一，它可以轻松地实现许多炫酷的效果。其中，让图形倒下是一种比较常见的效果，接下来我们就来看看CSS3怎样使图形倒下。.box { : relative; } .box:...

CSS3是前端开发中常用的技术之一，它可以轻松地实现许多炫酷的效果。其中，让图形倒下是一种比较常见的效果，接下来我们就来看看CSS3怎样使图形倒下。

.box {
  position: relative;
}
.box:before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform-origin: top center;
  transform: skewY(-7deg);
  background-color: #f5c80f;
  z-index: -1;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, .5);
} 

上述代码中，我们首先给盒子.box设置了position:relative属性，然后使用伪元素:before在盒子上方绘制倒下的图形。在伪元素的样式中，我们使用transform属性中的skewY方法让图形倾斜七度，并通过transform-origin属性将倾斜的中心点设置在顶部中间。最后，我们使用background-color属性设置图形的背景颜色，z-index属性设置伪元素在盒子下方，box-shadow属性用来给图形添加阴影效果。

通过使用上述代码，我们就可以轻松实现一个倒下的图形效果。可以根据需要调整倾斜角度、背景颜色等参数，加以变化，以达到更加炫酷的效果。