CSS一个div实现一个心形

落日映苍穹つ 2023-02-11 08:52 1阅读 0赞

css

.heart { 
          width: 100px;
          height: 100px;
          position: relative;
          background-color: #f00;
          transform: rotate(45deg);
        }
        .heart::before, .heart::after { 
          position: absolute;
          content: '';
          background-color: #f00;
          top: 0px;
          left: -50%;
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
    
        .heart::after { 
          left: 0;
          top: -50%;
        }

<div class="heart"></div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200522164030650.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关用JAVA代码写一个心形

您好！下面是一个用 Java 代码绘制心形的示例： public class HeartShape { public static void main

Dear 丶/ 2024年03月25日 19:50/ 0 赞/ 91 阅读

相关请用python生成一个心形

可以使用如下代码生成心形： print("\u2764") 也可以使用 ASCII 字符来绘制心形： print("❤️") 如果需要更复杂的心形，可以

冷不防/ 2024年03月25日 19:07/ 0 赞/ 84 阅读

相关请用python生成一个心形

可以使用如下代码生成心形： print("\u2764") 也可以使用 ASCII 字符来绘制心形： print("❤️") 如果需要更复杂的心形，可以

太过爱你忘了你带给我的痛/ 2024年03月25日 11:57/ 0 赞/ 106 阅读

相关用JAVA代码写一个心形

您好！下面是一个用 Java 代码绘制心形的示例： public class HeartShape { public static void main

Love The Way You Lie/ 2024年03月25日 07:11/ 0 赞/ 101 阅读

相关编程实现心形图案

以下是使用Python编程语言实现心形图案的源代码： import math def draw_heart(): scale = 1

深碍√TFBOYSˉ_/ 2023年10月16日 13:46/ 0 赞/ 85 阅读

相关 CSS Mask Div 与另一个 Div - 完整指南

CSS 是一个强大的工具，可用于在网站上创建视觉上令人惊叹的设计。CSS 中最流行的技术之一是屏蔽。它允许您根据另一个元素的内容隐藏元素的某些部分。在本文中，我们将探讨如何使用

痛定思痛。/ 2023年10月13日 08:06/ 0 赞/ 69 阅读

相关用C++写一个心形图片程序

以下是一个在 C 语言中用字符图形构建心形图像的示例代码： include <stdio.h> include <math.h> int m

Dear 丶/ 2023年09月25日 15:57/ 0 赞/ 98 阅读

相关【Python】画一个心形

![1783030-20200130185832133-1612765793.png][] !/usr/bin/env python -- cod

向右看齐/ 2023年07月21日 08:36/ 0 赞/ 62 阅读

相关 CSS一个div实现一个心形

css .heart { width: 100px; height: 100px; position:

落日映苍穹つ/ 2023年02月11日 08:52/ 0 赞/ 2 阅读

相关贡献一个CSS心形加载的动画源码

废话不多说上代码，代码很简答，研究一下就明白了，有不明白的可以问我。 <!DOCTYPE html> <html> <head>

淩亂°似流年/ 2022年11月25日 05:22/ 0 赞/ 120 阅读