你以为520过去了，你就逃过一劫了？那不是还有分手呢，那不是还得再找对象呢，那不是还有七夕节呢，那不是还有纪念日呢，那不是还有各种各样的节日呢，所以呀，这8种HTML5 + CSS3打造8种心形特效，尤其是开发者，必须学会，下面开始吧。
目录
1 输入法式
2 img标签引入式
3 光棍式
4 积点成面式
5 SVG路径式
6 三角拼接式
7 握手式
8 万能式（重点来了）
1 输入法式别把一切都想得那么难，当别人还在特别费劲的代码生成的时候，当别人还在苦思于如何利用AIGC的时候，你直接一个输入法搞定，而且这种方式高效，高性能。看，爱心来了
❤ 2 img标签引入式千万不要沉溺于技术思维，别管别人怎么实现，我去网上找个图片，直接img引入不是也很OK吗？又不是不能用，看下面的图，你就说，漂亮不漂亮吧
3 光棍式不想在下个双11成为光棍，就赶紧学习来，哈哈，这其实就是一些对称的纵向元素集合起来的，看代码：
*{padding: 0;margin: 0;list-style: none;}#he{display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #232e6d;}ul{height: 200px;}li{float: left;width: 20px;height: 20px;border-radius: 20px;margin-right: 10px;background-color: red;}.love1 { height: 60px; transform: translateY(-30px);}.love2 { height: 125px; transform: translateY(-62.5px);}.love3 { height: 160px; transform: translateY(-75px);}.love4 { height: 180px; transform: translateY(-60px);}.love5 { height: 190px; transform: translateY(-45px);} 4 积点成面式哈哈，看了这么多，你是否想到了定位式，就是弄很多的红点，最终通过定位生成到一起呢，对，就是position定位，来看代码：
.heart-box { margin: 100px; padding: 0; position: relative; width: 200px; height: 200px; } span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: red; } .s1 { margin-left: 17px; } .s2 { margin-left: 51px; } .s3 { margin-left: 34px; } .s4 { margin-left: 51px; } .s5 { margin-left: 68px; } 5 SVG路径式说到SVG路径，只要你肯下功夫，相信大部分图形还是可以靠SVG绘制出来的，请看代码：
.heart { width: 200px; height: 200px; display: block; margin: 50px auto; } 6 三角拼接式相信用CSS画一个三角形大家都熟悉，所以呢，下面准备一个倒三角，上面准备一个圆形的帽子，帽子上面再加一个倒三角是不是就可以了呢，上代码：
.heart { margin: 200px; position: relative; } .hat { width: 100px; height: 81px; background: red; border-radius: 50%; } .triangle1 { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 48px solid red; position: absolute; top: 44px; } .triangle2 { width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 23px solid #FFF; position: absolute; top: -5px; z-index: 3; left: 19px; }哈哈，你就说这个心形怎么样吧，你敢说这不是心形？顶部有张嘴，中间有圆形，下面有尖尖，这就是心形。
7 握手式握手式呢，也就是两个形状，像是握手一样，倾斜，有个角度，最后由于倾斜角度形成一个心形，上代码：
.heart{ width: 300px; height: 300px; background-color: pink; margin: 100px auto; position: relative; } .heart::before,.heart::after{ position: absolute; display: block; content:"."; width: 150px; height: 250px; background-color: red; border-top-left-radius: 50% 75px; border-top-right-radius: 50% 75px; left: 41px; top: 0px; transform: rotate(-45deg); } .heart::after{ transform: rotate(45deg); left: 112px; } 8 万能式（重点来了）什么是万能式呢，意思就是说，你想在某个节日抓住女朋友的心，你用开发代码写一万个心形，其实也未必好使，你就是敲代码敲的吐了血，也不一定好使。但第8种方案，也就是万能式，是真的好使，如果你用了这一招，相信是可以不用学前7招的。你看下面这个心形链漂不漂亮，你觉得如果在下个节日，你使用了这个心形链效果会如何呢？
我知道很多开发者敲代码的在这方面还是很木讷的，不知道节日该送什么礼物来表达自己的心，太贵重的又不想弄，久而久之，不知道送什么就显得木讷了，其实不是的，我们是可以搞定这个心形的。
学习使用