开篇
- 2022年第一篇文章，小嘟先在这里和各位读者说声：新年快乐哟！然后呢，希望大家在今年也能有所收获，有所进步吧，咱们一起加油！！！奥利给。
中心-（爱心的实现历程）
- 1、首先来看看效果图吧 !
2、接下来和大家说说这个是如何实现的呢？
为了方便叙述，我先将大致结构画出，图中名称为各个div上的class（class是一个属性），div是一个html标签。
- 1、我先设置一个container容器，然后在它的里边又添加了两个div，将上边的称为top，将下边的称为bottom，在top中我又添加了两个div，将左边的称为left，右边的称为right。
- 2、其次，我将爱心分解成我们常见的几何图形，两个半圆，一个三角形，如下图所示：
- 3、上边半圆的实现我用到了border-radius这个css属性，这个属性可以用来画圆角。下边的三角形我是将border-top设置成红色，其他三个方向的border设置成透明色，这里重要的地方是：我们需要将bottom这个div的宽高设置为0。
结尾（附上源码）
源代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现爱心</title> <style> .container{ width: 300px; height: 300px; margin: 100px auto; } .top{ height: 52px;} .left, .right{ display: inline-block; width: 100px; height: 50px; background-color: red; border: 1px solid red; border-top-left-radius: 50px; border-top-right-radius: 50px; } .bottom{ width: 0; height: 0; border-top:100px solid red; border-top-left-radius:2px ; border-top-right-radius:2px; border-bottom:100px solid transparent; border-left:102px solid transparent; border-right:102px solid transparent; } </style> </head> <body> <div class="container"> <div class="top"> <span class="left"></span><span class="right"></span> </div> <div class="bottom"></div> </div> </body> </html>
觉得这个系列还不错的话，请点赞支持支持！
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)