[分享]css3怎么绘制直角梯形

CSS3是一个非常有用的前端技术，它可以用来绘制出各种复杂且炫酷的效果。其中，绘制直角梯形就是一件非常简单的事情，下面我们就来看一下怎样使用CSS3来绘制直角梯形。.righttrapezoid { ...

CSS3是一个非常有用的前端技术，它可以用来绘制出各种复杂且炫酷的效果。其中，绘制直角梯形就是一件非常简单的事情，下面我们就来看一下怎样使用CSS3来绘制直角梯形。

.right-trapezoid {
    border-bottom: 50px solid #6BAED6;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
} 

上面的代码中，我们使用了border属性来绘制直角梯形，其中border-bottom属性用来设置底边的宽度和颜色，border-right属性用来设置右边的斜线宽度和颜色，height属性用来设置高度为0，width属性用来设置梯形的宽度。

如果想绘制倒立的梯形，可以使用下面的代码：

.inverted-right-trapezoid {
    border-top: 50px solid #6BAED6;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
} 

上面的代码中，我们使用了border-top属性来设置顶边的宽度和颜色，其他跟前面是一样的。

绘制直角梯形就是这么简单，我们只需要使用border属性来设置边框的样式就可以了。