css怎么实现梯形

第css怎么实现梯形我们先理理思路，大家想一想，梯形是怎么构成的，小学的数学课本都讲过的，就拿等腰梯形来说，是由两个直角三角形，和一个长方形或正方形组成的，看草图

这意味着，我们要用一个方形和两个三角形来拼接成一个梯形，这么一说大家的思路是不是豁然开朗了，

方形好实现，那么三角形怎么实现？下面我们来看看三角形的实现方法：

1，首先，我创建了一个class名为box的div，我们暂且亲切的称它为小盒子

html：

div>

css：

!--小盒子的样式--

.box

width:20px;

height:20px;

background-color:blue;

}

我们看一下效果，其实就是一个普通的，背景颜色为蓝色的div。

2，然后，我们给小盒子添加四条边框样式，边框设置的宽一点，四条边框的颜色给不一样的值，方便我们查看，

width:50px;

height:50px;

background-color:blue;

border-top:50pxsolidred;

border-right:50pxsolidyellow;

border-bottom:50pxsolidgreen;

border-left:50pxsolidpink;

}

看看效果，已经是一个比较花哨的存在了。

3，然后，我们把小盒子的宽高设置为0px，去掉蓝色的背景色，当然就只剩下四周的边框了，脑补一下，然后我们上代码，看一下效果。

width:0px;

height:0px;

border-top:50pxsolidred;

border-right:50pxsolidyellow;

border-bottom:50pxsolidgreen;

border-left:50pxsolidpink;

}

来，上效果，look一下！童鞋们，我么似乎已经看到了4个颜色不同的三角形了，接下来要做的步骤，就很清晰了。

4，假设我们想要一个向上的三角形，只要把小盒子上、右、左方向边框的颜色设置为透明，就只剩下下边框，也就是向上的小三角了，来上代码，look一下！

.box

width:0px;

height:0px;

border-top:50pxsolidrgba(0,0,0,0);

border-right:50pxsolidrgba(0,0,0,0);

border-bottom:50pxsolidgreen;

border-left:50pxsolidrgba(0,0,0,0);

}

看效果！绿色的向上的小三角就出现了，\(^o^)/

通过上面的操作，我们已经成功的用css做出了小三角形，是不是很简单。

不多说，来，下面就来看看梯形要怎么实现

1，首先，做三个小盒子1号，和3号小盒子都做成小三角形，2号小盒子做成一个正方形。

html：

div>

css：

.box,.box3

width:0px;

height:0px;

border-top:50pxsolidrgba(0,0,0,0);

border-right:50pxsolidrgba(0,0,0,0);

border-bottom:50pxsolidgreen;

border-left:50pxsolidrgba(0,0,0,0);

margin-bottom:10px;

.box2

width:50px;

height:50px;

background-color:green;

}

先看看效果

2，有人要问了，形状是出来了，但是怎么拼起来呢，这里就要用到css中的定位指示和css3里的transfrom了。不了解的话，w3c里都有详细的解释，我这里只管实现我们要的效果。

3，先把所有的小盒子排成一排，使块状元素排成一排的方法：可以给小盒子加浮动float，也可以直接设置小盒子的display：inline-block；由于我的习惯是只要加浮动，就要给父元素清浮动，比较麻烦，我就直接设置小盒子的display：inline-block了。

4,最后设置一下1号，和3号小盒子的位移就ok了，看代码

.box{

transform:translate(54px,10px);

.box3{

transform:translate(-54px,10px);

}