css 实现三角形、梯形、平行四边形、爱心等形状

css 是一门很高深的学问，是前端页面是否好看的支柱。之前一直小看了css的力量，最近看其他博主的书才明白自己的css是多么的菜，以为会点布局就是css了有点贻笑大方了。这篇博客利用css 实现各种形状的编写。

完整代码：https://github.com/shenweizheng110/study/blob/master/demo/cssShape.html

css 要想实现三角形、梯形灯形状，主要利用 border 的相关特性。那么首先看一下border属性，我们给一个div设置很宽的border。

width: 40px;
height: 40px;
border-top: 50px solid red;
border-left: 50px solid black;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;

效果为：

为了看起来清楚一点，我用了四种不同的颜色进行区分。那么我们设置 width 和 hight 都为 0 ，也就是content所占据的面积为0 那么在标准盒模型下，整个div所展示的面积就会由我们的border的宽度所占据，毕竟我们这里没有margin 和 padding。

width: 40px;
height: 40px;
border-top: 50px solid red;
border-left: 50px solid black;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;

如果我们只需要下面蓝色的那个三角形，只需要不设置 上边框，然后左右两个边框的颜色为透明的就可以。当然也可以设置除了蓝色的其余边边框的颜色为透明的也可以。

width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: blue;

接下来我们看一下改变三角形的变长，大家都知道改变边框的宽度用的是 border-width 属性。我们可以逐渐的加大 border-bottom 试试
border-bottom 为 100 px 时：

可以