如何运用CSS实现梯形 思路是什么
|
今天我们来学习关于“如何利用CSS实现梯形，思路是什么”的内容，下文有详解方法和实例，内容详细，逻辑清晰，有需要的朋友可以参考，希望大家阅读完这篇文章后能有所收获，那么下面就一起来了解一下吧。 我们先理理思路，大家想一想，梯形是怎么构成的，小学的数学课本都讲过的，就拿等腰梯形来说， 是由两个直角三角形，和一个长方形或正方形组成的，看草图。 这意味着，我们要用一个‘方形’和两个三角形来拼接成一个梯形，这么一说大家的思路是不是豁然开朗了， 方形好实现，那么三角形怎么实现？下面我们来看看三角形的实现方法： 1，首先，我创建了一个 class 名为 ‘box’ 的div，我们暂且亲切的称它为‘小盒子’ html： <div class='box'></div> 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); } 看效果！ 通过上面的操作，我们已经成功的用css 做出了小三角形，是不是很简单。 不多说，来，下面就来看看梯形要怎么实现 1，首先，做三个‘小盒子’ 1号，和3号小盒子都做成小三角形，2号小盒子做成一个正方形。 html： <div class='box'></div> <div class='box2'></div> <div class='box3'></div> css： .box,.box3 { 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); 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了。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
