css画心形、三角形的总结

 1 .heart {
 2   width: 10px;
 3   height: 10px;
 4   /* position: fixed; */
 5   background: #fff;
 6   transform: rotate(45deg);
 7   -webkit-transform: rotate(45deg);
 8   -moz-transform: rotate(45deg);
 9   display: inline-block;
10 }
11 .heart:after,.heart:before {
12   content: '';
13   width: inherit;
14   height: inherit;
15   background: inherit;
16   border-radius: 50%;
17   -webkit-border-radius: 50%;
18   -moz-border-radius: 50%;
19   position: absolute;
20 }
21 .heart:after {
22   top: -5px;
23   left: 0px;
24 }
25 .heart:before {
26   left: -5px;
27 }

话不多说，直接上代码，因为很好理解。以上是心形，以下是三角形。

/* 等边三角形，底边平行：*/
        border-right: 100px solid transparent;
        border-bottom: 173.2px solid #17ad17;
        border-left: 100px solid transparent;

/* 直角三角形，底边平行：*/
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent blue;

1.心形

　　一直以来，有各种用css画心角形也好，其他组合图形也好，对勾或叉叉也好，他们的思路是基本一致的。那就是，使用transform旋转，再结合伪元素来实现。

　　像本例中，就是使用一个正方形旋转40度做心形的下角，然后使用两个伪元素画成圆圈，再结合绝对定位，并继承正方形的宽高以实现等大来实现组成心形。

2.三角形

　　三角形的实现方法更简单，只有一个border属性即可。border结合透明，进而实现三角形的形状。其中，关于三角形的边上下平行还是左右还是别的方向，可以通过变换设置上下左右四个border实现，也可以旋转父元素实现。

　　三角形扩展：

　　2.1.带边框三角形

　　原理就是使用伪元素再画一个稍小一点点的三角形，然后使用绝对定位使其重心重合即可。

　　2.2.三角形箭头

　　原理同上，只是最后不是重心重合，而是一边重合。