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- 0 40px 40px;
border-style: solid;
border-color: transparent transparent blue;
1.心形
一直以来，有各种用css画心角形也好，其他组合图形也好，对勾或叉叉也好，他们的思路是基本一致的。那就是，使用transform旋转，再结合伪元素来实现。
像本例中，就是使用一个正方形旋转40度做心形的下角，然后使用两个伪元素画成圆圈，再结合绝对定位，并继承正方形的宽高以实现等大来实现组成心形。
2.三角形
三角形的实现方法更简单，只有一个border属性即可。border结合透明，进而实现三角形的形状。其中，关于三角形的边上下平行还是左右还是别的方向，可以通过变换设置上下左右四个border实现，也可以旋转父元素实现。
三角形扩展：
2.1.带边框三角形
原理就是使用伪元素再画一个稍小一点点的三角形，然后使用绝对定位使其重心重合即可。
2.2.三角形箭头
原理同上，只是最后不是重心重合，而是一边重合。