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 时：
可以看的出来时三角形的高变大了，而不是三角形的底变大了。之前我也在懵逼为什么会是这样的，结果我发现对 border-width 的了解出现了偏差。事实上，border-width 是这样的：
图中的这条白线才是 border-width。
那么同样的，蓝色三角形的边长是 border-left-width 加上 border-right-width 的和，高度为 border-bottom-width。
直角三角形
上面说了三角形的边和高的构成，那么直角三角形就是将border-left 或者 border-right其中一个置为0；
width: 0;
height: 0;
border-left: 50px solid transparent;
border-bottom: 50px solid blue;
等边三角形
等边三角形的定义是三角形的三边长相等，高为边的 , 那么高是由border-bottom-width控制的，而变长是由 border-left-width 与 border-right-width 的和。那么如果我们的 border-left-width 和 border-right-width 都为 50px 的话，高就是
, 粗略的为 86px
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86px solid blue;
梯形
直角梯形
只需要将上边框取消，左右选取一个将其颜色置为透明
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
普通梯形
普通梯形的上边框需要使用width属性指定，要给他一定的宽度
width: 25px;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
菱形
这个就简单了，只要将正方形旋转 45 度。
width: 0;
height: 0;
border-top: 50px solid red;
border-left: 50px solid black;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
transform: rotate(45deg);
平行四边形
借助 transform 中的 skew 属性来实现，由于直接在div中使用，会导致内部的字体也会相应的倾斜，一种解决方案是对里面的文本加一个反向的倾斜，另一种解决方案是利用为元素进行倾斜，这样内部的文本就不会继承倾斜了。
.rhomboid{
width: 100px;
height: 100px;
position: relative;
}
.rhomboid::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: blue;
transform: skew(45deg);
}
爱心
爱心可以通过的其他元素进行遮掩拼接实现。首先画一个正方形
.love{
width: 100px;
height: 100px;
background: red;
}
通过为元素画两个圆覆盖在正方形上
.love::before{
content: '';
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: -50px;
border-radius: 50%;
background: yellow;
}
.love::after{
content: '';
width: 100px;
height: 100px;
position: absolute;
top: -50px;
left: 0;
border-radius: 50%;
background: yellow;
}
旋转 45 度 颜色改成一致的
