用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. rk3188 公板调试记录

    打开ccache后编译android果然快很多. make rk3188_sdk_defconfig 触摸屏有问题,然后再吧input底下的touchscreen 屏蔽掉     james@jame ...

  2. 最近遇到的bug

    1. 地图周边快查,按钮点击没反应 子控件超出了父控件 2.图片显示灰色背景,一直去不掉    设置图片背景图片clear cloro  3. 显示隐藏导航栏  下面两个方法效果不同     self ...

  3. BBS - 后台管理

    一.添加文章 注: 后台管理页面,应该有个新得 app /blog/backend/ # 文章列表页/blog/add_article/ # 添加文章 # 后台管理re_path(r'backend/ ...

  4. Python开发【笔记】：为什么pymysql重连后才能查到新添加的数据

    PyMysql操控 问题描述: 之前做数据库模块的时候用到了pymysql,测试中发现了一个问题,创建两个程序,select.py从数据库中不断的读取,insert.py在数据库中插入多条数据,但是s ...

  5. 如何在linux下安装jdk并运行java程序

    一.进入root 大家可以看到我这里用的是CentOS 6.5 系统 二.测试网络与YUM是否可用 1.测试网络 ping www.baidu.com,如下图就是通了 参考: 一.JDK安装1.lin ...

  6. Java中内部类揭秘(一):外部类与非静态内部类的”相互可见性“

               声明:本博客为原创博客.未经同意,不得转载.原文链接为 http://blog.csdn.net/bettarwang/article/details/27012421.     ...

  7. SQL Server 复制（Replication） ——事务复制搭建

    本文演示如何搭建最基本的事务复制. 环境准备: 虚拟机2台: 服务器名分别为RepA和RepB,RepA为发布服务器,RepB为订阅服务器.均安装WindowsServer 2008R2英文版(在外企 ...

  8. （21）纹理缓存（Texture Cache）

    简介 纹理缓存是将纹理缓存起来方便之后的绘制工作.每一个缓存的图像的大小,颜色和区域范围都是可以被修改的.这些信息都是存储在内存中的,不用在每一次绘制的时候都发送给GPU. CCTextureCach ...

  9. http之url和uri

    HTTP使用统一资源标识符(Uniform Resource Identifiers, URI)来传输数据和建立连接.URL是一种特殊类型的URI,包含了用于查找某个资源的足够的信息 URL,全称是U ...

  10. 什么是ASCII码文本文件

    标准ASCII码方式(也称文本方式)存储的文件,更确切地说,英文.数字等字符存储的是ASCII码.文本文件中除了存储文件有效字符信息(包括能用ASCII码字符表示的回车.换行等信息)外,不能存储其他任 ...