CSS:两种方式画一个梯形

223 阅读1分钟

在html网页设计中,常会结合css绘制一些简单的形状,当然除简单的矩形之外,最近在网页设计过程中,我遇到了要画一个梯形的需求,经过学习之后,总结两种方式画一个梯形,这里只是针对梯形,其他情况另作参考。

1. 利用border加粗方式

这是网上较为常见的方式,其原理就是对一个高度为0px的正方形的div的border-top进行增粗。
在这里插入图片描述

理解代码:

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

原理:

先看两幅图:\