用1个标签实现心形图案，show you the code;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

  <style type="text/css">

  .container{

    margin-top: 50px;

    text-align: center;

  }

   :root {

    --heart-color:pink;

  }

  .heart{

    display: inline-block;

    position: relative;

    width: 60px;

    height: 60px;

    background-color: var(--heart-color,red);

    transform: rotate(-45deg)

  }

  .heart::before,

  .heart::after {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    background-color: var(--heart-color,red);;

  }

  .heart::before{

    top: -50%;

    left: 0;

  }

  </style>

</head>

<body>

  <div class="container">

    <i class="heart"></i>

  </div>

</body>

</html>

有木有觉得css很好玩，let's do something interesting!

css实现心形图案的更多相关文章

  1. 【C语言】用C语言输出“心形”图案

    在你们的世界里,是不是觉得程序猿一点浪漫都不懂?其实不是的,程序猿的世界也是很浪漫滴! 傻瓜版 int main() { printf("❤"); ; } 高级版 //版本一:单个 ...

  2. CSS实现心形、六角星、六边形、平行四边形等几何

    本文将利用border属性实现简单几何的绘制: 效果图: 正八角星 说明:采用两个正方形以中心进行旋转叠加: /* 八角星 */ #burst-8 { background: #6376ff1f; w ...

  3. Python 一行代码输出心形图案

    Python3 >>> print('\n'.join([''.join([('Love'[(x-y)%4]if((x*0.05)**2+(y*0.1)**2-1)**3-(x*0. ...

  4. [Micropython]TPYBoard v10x拼插编程实验 点亮心形点阵

    一.什么是TPYBoard开发板 TPYBoard是以遵照MIT许可的MicroPython为基础,由TurnipSmart公司制作的一款MicroPython开发板,它基于STM32F405单片机, ...

  5. CorelDRAW快速制作绚丽的彩色透明心形

    今天小编分享给小伙伴们用CorelDRAW打造绚丽的彩色透明心形.主要使用完美形状组中的心形造型制作出心形图案,经过对图形的模糊操作,再经过图框精确剪裁,最后添加一个彩虹渐变色实现绚丽的彩色透明效果. ...

  6. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  7. CSS奇思妙想图形（心形、气泡三角形、切角、梯形、饼图等）

    今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...

  8. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  9. css3实现三角形，聊天背景气泡，心形等形状

    1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...

随机推荐

  1. Linux下使用iotop检测磁盘io使用情况

    介绍 Linux下的IO统计工具如iostat, nmon等大多数是只能统计到per设备的读写情况, 如果你想知道每个进程是如何使用IO的就比较麻烦. iotop 是一个用来监视磁盘 I/O 使用状况 ...

  2. Android中的Handler及它所引出的Looper、MessageQueue、Message

    0.引入 0.1.线程间通信的目的 首先,线程间通信要交流些什么呢? 解答这个问题要从为什么要有多线程开始,需要多线程的原因大概有这些 最早也最基本:有的任务需要大量的时间,但其实并不占用计算资源,比 ...

  3. SHFileOperation的用法

    //删除文件或者文件夹bool DeleteFile(char * lpszPath){SHFILEOPSTRUCT FileOp={0};FileOp.fFlags = FOF_ALLOWUNDO ...

  4. C++ Design Pattern: What is a Design Pattern?

    Q: What is a Design Pattern? A: Design Patterns represent solutions to problems what arise when deve ...

  5. MongoDB: 原子性和事务

    在MongoDB中, 文档级别的的写操作是原子性的, 甚至是在对某个文档的操作中修改其多个内嵌的子文档, 也是原子性的. 在一个写操作同时修改多个文档的情况, 对其中单独的某个文档而言是原子的, 但是 ...

  6. centos单用户 救援 运行级别 yum,单用户模式,救援模式,inittab ：启动级别 e2fsck wetty mingetty 物理终端 /dev/console 虚拟终端 /dev/tty(0,6) 模拟终端 /dev/pts/# grub-md5-crypt 给grub加密码 initrd 第二节课

    centos单用户 救援 运行级别  yum,单用户模式,救援模式,inittab :启动级别  e2fsck  wetty  mingetty  物理终端 /dev/console  虚拟终端 /d ...

  7. java.lang.NoSuchMethodError: scala.Predef$.refArrayOps([Ljava/lang/Object;)Lscala/collection/mutable/ArrayOps;

    用Maven创建了一个spark sql项目,在引入spark sql jar包时引入的是: <dependency> <groupId>org.apache.spark< ...

  8. [py]类属性和实例属性

    默认类和实例的内置属性一致 class A: """测试类""" name = "maotai" def __init_ ...

  9. [sql] 同库表(结构)的备份和sql聚合&navicat使用

    同库表的备份-赋值表结构和数据SQL语句 参考 有时候我们处理某个表时,需要先备份下这个表到当前这个库,然后再执行sql. 站在sql角度,就无需在mysqldump或者诸如导出sql的方式来备份了. ...

  10. linux安装Navicat，界面出现乱码解决方法

    下载Navicat:navicat112_mariadb_cs_x64.tar.gz 点击" ./start_navicat"安装出现界面便面为乱码 解决办法:打开start_na ...