html css 画梯形,css怎么画梯形？

在html网页设计中，常会结合css绘制一些简单的形状，那么使用css该如何画梯形呢？下面我们来看一下使用css画梯形的方法。

css绘制梯形的方法：

1. 利用border加粗方式

这是网上较为常见的方式，其原理就是对一个高度为0px的正方形的div的border-top进行增粗。

理解代码：

建立一个div,高度为0,宽度400px(可以理解为一个矩形，但矩形的高度为0，自然这个矩形就这垂直方向压缩成了一条线)，div上边界粗度或厚度设为100px且为实线，左右边界线厚度也为100px，但设为透明(利用了css的transparent属性)

2. 利用3d旋转和透视3d旋转和透视方式

这种方式是对div进行旋转和透视操作，最终形成一个梯形。

理解代码：

设置宽高及背景颜色不再多说，这里主要用到transform属性transform: perspective(2em) rotateX(-10deg);

perspective：对元素进行透视操作

rotateX：以x轴(横轴)进行旋转(前后仰俯)