等腰梯形图片(梯形等腰梯形)

秋收录百科 4个月前 (01-04) 21浏览

相信大家肯定在设计稿上面看见过三角形和梯形，大家是怎么做的？让设计师切一个图给你？哈哈哈，这个方法确实省时省力。不过我今天分享的是怎么用纯css来画一个。

完整的代码，可以在这里查看。

画三角形之前，我们先来给一个正方形加个边框，不同边为不同的颜色，看看能看出什么端倪？

#square1 {
  width: 100px;
  height: 100px;
  border-top: 10px solid red;
  border-bottom: 10px solid yellow;
  border-left: 10px solid  green;
  border-right: 10px solid  blue;
}

哦，原来两条边交汇的地方是个斜角，边框是个梯形。

那我们在缩小宽高，再来看看有什么变化？

等腰梯形图片

#square2 {
  width: 10px;
  height: 10px;
  border-top: 10px solid red;
  border-bottom: 10px solid yellow;
  border-left: 10px solid  green;
  border-right: 10px solid  blue;
}

从图片中不难看出，当宽高缩小的时候，四个梯形交汇的地方也变小了，那我们大胆的设想一下，当宽高为0的时候，是不是4个梯形就交汇到一起形成一个4个三角形了？带着这个设想我们再来试一下。

#square3 {
  width: 0px;
  height: 0px;
  border-top: 10px solid red;
  border-bottom: 10px solid yellow;
  border-left: 10px solid  green;
  border-right: 10px solid  blue;
}

yeah，和我们猜想的是一样的。那4个三角形都出来了，一个三角形还会远吗？我们只要将不想要的三角形设置为透明就可以啦！

等腰梯形图片

#triangle1{
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid yellow;
  border-left: 10px solid  transparent;
  border-right: 10px solid  transparent;
}

这样一个等边三角形我们就轻松获得了。这时候我又有一个大胆的想法：如果想要一个等腰三角形、直角三角形或者不规则三角形怎么办？

那我们先回到上面4个三角形的例子，分别改变上下边框和左右边框的宽度，看看能发现什么？

#square4 {
  width: 0px;
  height: 0px;
  border-top: 20px solid red;
  border-bottom: 20px solid yellow;
  border-left: 10px solid  green;
  border-right: 10px solid  blue;
}

当增加上下边框的宽度，上下两个三角形高度增加，左右两个三角形的底的长度增加。

#square5 {
  width: 0px;
  height: 0px;
  border-top: 10px solid red;
  border-bottom: 10px solid yellow;
  border-left: 20px solid  green;
  border-right: 20px solid  blue;
}

当增加左右边框的宽度，左右两个三角形的高增加，上下两个三角形高度增加。

有了这个认识，我们再来画等腰三角形，直角三角形，不规则三角形就简单很多了。

等腰三角形：增加下面三角形的边框

#triangle2{
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 30px solid yellow;
  border-left: 10px solid  transparent;
  border-right: 10px solid  transparent;
}

直角三角形：左边边框宽度为0

#triangle3{
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid yellow;
  border-left: 0px solid  transparent;
  border-right: 10px solid  transparent;
}

不规则三角形：4个边框分别给不同的宽度，然后想要什么样不规则的三角形，其他三个就透明吧。

#triangle4{
  width: 0px;
  height: 0px;
  border-top: 5px solid red;
  border-bottom: 8px solid yellow;
  border-left: 15px solid  green;
  border-right: 30px solid  blue;
}

上面的例子，我们的三角形的底都是水平或者垂直的，那要有角度怎么办？

也很简单，我们只要配合transform就可以实现了。

#triangle5{
        width: 0px;
        height: 0px;
        border-top: 5px solid red;
        border-bottom: 8px solid yellow;
        border-left: 15px solid  green;
        border-right: 30px solid  blue;
        transform: rotate(20deg);
    }