htmlcss画梯形,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 border属性
这种⽅式是对div进⾏旋转和透视操作,最终形成⼀个梯形。
理解代码:
设置宽⾼及背景颜⾊不再多说,这⾥主要⽤到transform属性transform: perspective(2em) rotateX(-10deg); perspective:对元素进⾏透视操作
rotateX:以x轴(横轴)进⾏旋转(前后仰俯)