本文介绍了如何使用CSS来创建梯形的两种技术。第一种方法是通过设置高度为0的div的border属性，使上边界加粗而左右边界透明。第二种方法则涉及3D旋转和透视，通过transform属性对div进行旋转和透视操作，从而形成梯形效果。这两种技术都是HTML网页设计中实现几何形状绘制的有效手段。
在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轴(横轴)进行旋转(前后仰俯)
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
