纯css实现三⾓形、梯形等效果
  今天⼀个刚开始学习html 的⼩⽩问我⼀个问题，css 可以实现正⽅形，长⽅形，和圆型（border-radius），怎么能做出个三⾓形、梯形等等形状呢？于是我便开启了模式，给他讲解了⼀下我的思路，在我的帮助下，他终于⽤css 做出了⾃⼰的三⾓形、梯形。我表⽰很欣慰，于是，为了帮助更多像我这个朋友⼀样基础的⼩⽩，我决定献丑，把我的思路，和做法写成⼀篇博⽂，分享给⼤家。
  闲话少叙，开始！
  1，⾸先，我创建了⼀个 class 名为 ‘box’ 的div，我们暂且亲切的称它为‘⼩盒⼦’
  html：border radius什么意思
<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);
}
  看效果！绿⾊的向上的⼩三⾓就出现了， \(^o^)/
-------------------------------第⼀阶段-总结-------------------------------------
  通过上⾯的操作，我们已经成功的⽤css 做出了⼩三⾓形，是不是很简单。
  上⾯我说过了，也可以做出梯形，该怎么做呢？下⾯我们⼀起学习⼀下。↓
------------------------------------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了，看代码↓
      .box{
transform: translate(54px,10px);
}
.box3{
transform: translate(-54px,10px);
}
  再看看效果↓
  介绍到这⾥，我们已经⽤css 把梯形做出来了，还有其他的图形，⽐如平⾏四边形等，类似的东西，举⼀反三，都可以通过这种⽅法做出来，在这⾥我就不⼀⼀介绍了。最后，祝⼤家学习愉快。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。