重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
css如何实现梯形
这篇文章给大家分享的是有关css如何实现梯形的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、虚拟空间、营销软件、网站建设、荥阳网站维护、网站推广。
css实现梯形的方法：1、创建三个div元素；2、利用border属性分别将第一和第三个div元素设置为直角三角形；3、将第二个div元素设置为正方形；4、使用transform属性将两个直角三角形和一个正方形拼接成一个梯形。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
------------------------------------css做梯形---------------------------------------------
我们先理理思路，大家想一想，梯形是怎么构成的，小学的数学课本都讲过的，就拿等腰梯形来说， 是由两个直角三角形，和一个长方形或正方形组成的，看草图↓
这意味着，我们要用一个‘方形’和两个三角形来拼接成一个梯形，这么一说大家的思路是不是豁然开朗了，
方形好实现，那么三角形怎么实现？下面我们来看看三角形的实现方法：
1，首先，我创建了一个 class 名为 ‘box’ 的div，我们暂且亲切的称它为‘小盒子’
html：
css：
.box
{
width:20px;
height:20px;
background-color:blue;
}我们看一下效果， 其实就是一个普通的，背景颜色为蓝色的div。
2，然后，我们给‘小盒子’添加四条边框样式，边框设置的宽一点， 四条边框的颜色给不一样的值， 方便我们查看，
.box
{
width:50px;
height:50px;
background-color:blue;
border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}看看效果， 已经是一个比较花哨的存在了。
3，然后，我们把‘小盒子’的宽高设置为0px，去掉蓝色的背景色， 当然就只剩下四周的边框了，脑补一下， 然后我们上代码，看一下效果。
.box
{
width:0px;
height:0px;
border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}来，上效果，look一下！童鞋们， 我么似乎已经看到了4个颜色不同的三角形了，接下来要做的步骤，就很清晰了。
4，假设我们想要一个向上的三角形，只要把‘小盒子’上、右、左 方向边框的颜色设置为透明， 就只剩下下边框，也就是向上的小三角了， 来上代码，look一下！
.box
{
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid green;
border-left:50px solid rgba(0,0,0,0);
}看效果！绿色的向上的小三角就出现了， \(^o^)/
通过上面的操作，我们已经成功的用css 做出了小三角形，是不是很简单。
不多说，来，下面就来看看梯形要怎么实现
1，首先，做三个‘小盒子’ 1号，和3号小盒子都做成小三角形，2号小盒子做成一个正方形。
html：
