css3不规则的图形 |动画延时css

重置css reset，css动画哪个好看，css3揭示动画，css文件加随机后缀，淘宝开通css权限的店铺，css字体对齐方式居左，动画延时css css3不规则的图形 |动画延时css

想要制作不规则的图形，大家首先需要了解一些CSS3属性。

.shape {
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-right: 100px solid #f00;
border-bottom: 50px solid transparent;
transform: rotate(45deg) scaleX(1.2);
}

上面这段代码用来制作一个斜切矩形的效果，其中用到了border属性和transform属性。

除了上述的属性外，大家还可以使用clip-path属性来制作不规则的形状。

.shape {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: #f00;
width: 200px;
height: 200px;
}

上述代码用来制作一个菱形。clip-path属性的polygon()函数可以接受多个参数，每个参数都表示一个坐标点，这些坐标点可以组成不规则的形状。

除了以上的方法，大家还可以使用伪类和伪元素来制作一些不规则的图形效果。

.shape:before {
content: "";
position: absolute;
top: -30px;
left: -30px;
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #f00;
border-left: 30px solid transparent;
transform: rotate(45deg);
}

上述代码用来制作一个箭头的效果。其中用到了:before伪元素和transform属性。

利用以上的CSS3属性和技巧，大家可以轻松制作出各种炫酷的不规则图形效果。这对网页设计师来说是一个很好的补充，在设计过程中提供了更多的可能性和创意。