用html、css实现一颗简单小爱心【2022首文】

最新推荐文章于 2024-05-22 09:14:35 发布

爱叨叨的小嘟

最新推荐文章于 2024-05-22 09:14:35 发布

阅读量1.2k

点赞数 1

分类专栏：用编程实现一些简单小东西文章标签： css html 前端

本文链接：https://blog.csdn.net/L_Z_jay/article/details/122867236

版权

用编程实现一些简单小东西专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开篇

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>

觉得这个系列还不错的话，请点赞支持支持！

爱叨叨的小嘟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
用html、css实现一颗简单小爱心【2022首文】

开篇2022年第一篇文章，小嘟先在这里和各位读者说声：新年快乐哟！然后呢，希望大家在今年也能有所收获，有所进步吧，咱们一起加油！！！奥利给。中心-（爱心的实现历程）1、首先来看看效果图吧 !2、接下来和大家说说这个是如何实现的呢？为了方便叙述，我先将大致结构画出，图中名称为各个div上的class（class是一个属性），div是一个html标签。1、我先设置一个container容器，然后在它的里边又添加了两个div，将上边的称为top，将下边的称为bottom，在top
复制链接

扫一扫