html 画梯形容器,css怎么画梯形?

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

b549f676e0035ba602053dd4eb852a03.png

css绘制梯形的方法:

1. 利用border加粗方式

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

c5fe8cb725e9abc2d39135cc28944641.png

理解代码:

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

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

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

0d7cf990243d807b46ce7593c443abe4.png

理解代码:

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

perspective:对元素进行透视操作

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

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值