[分享]css3左边高右边低的图形

CSS3中的变形属性可以创造出各种有趣的图形效果，比如左边高右边低的三角形。

.triangle {
  width: 0;
  height: 0;
  border-bottom: 100px solid red; /* 左边高，设置下边框宽度即可 */
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
} 

以上为实现左边高右边低三角形的核心代码。其原理是通过设置边框的宽度和颜色，使用了CSS3的border属性实现的，其中左右边框使用了透明颜色，原因是为了实现三角形的倾斜效果。

除此之外，还可以使用transform属性和rotate函数使三角形变成直角三角形。代码如下：

.triangle {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 50px solid transparent;
  transform: rotate(45deg); /* 将三角形旋转45度，变成直角三角形 */
} 

上述代码中，加入了transform属性和rotate函数，使三角形产生了旋转变形的效果，让它成为了具有创意的不规则图形之一。

此外，也可以通过配合其他属性，如box-shadow和text-shadow，制造出更为绚丽的不规则图形。

总之，CSS3的各种创意用法，让我们的网页变得越来越丰富多彩，让我们在实现网页设计时，更具创意！