css画心形、三角形的总结

 .heart {
   width: 10px;
   height: 10px;
   /* position: fixed; */
   background: #fff;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   display: inline-block;
 }
 .heart:after,.heart:before {
   content: '';
   width: inherit;
   height: inherit;
   background: inherit;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   position: absolute;
 }
 .heart:after {
   top: -5px;
   left: 0px;
 }
 .heart:before {
   left: -5px;
 }

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

/* 等边三角形，底边平行：*/
	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.三角形箭头

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