简单记录

html画桃心的两种实现

第一种代码

<style>body{margin: 0;    /* 外边距清除 */}.heart{position:relative;width: 100px;/* 宽度：200像素 */height: 100px;/* 同理高度 */margin: 50px auto;/* 对应 上下  左右  auto自动居中 */background-color: #969696;/* 父盒子背景 */}.right{top: 0px;left: 0px;position:absolute;width: 50px;height: 75px;background-color: red;border-radius: 25px 25px 0 0;/* css3圆角属性 */transform: rotate(-45deg);/* css3变换属性  旋转（角度） */}.left{top: 0px;left: 0px;position:absolute;width: 50px;height: 75px;background-color: red;border-radius: 25px 25px 0 0;/* css3圆角属性 从左上顺时针对应*/transform: translateX(18px) rotate(45deg);}
</style>
<body><div class="heart"> <!-- class自定义类名  盒子标签 --><div class="right"></div><!-- 盒子右转 --><div class="left"></div><!-- 盒子左转 --></div>
</body>

实现效果：

第二种代码

<style>body{margin: 0px;}.heart{position: relative;width: 100px;background-color: gray;height: 100px;margin: 50px auto;}.heart:before,.heart:after{content: '';position: absolute;top: 0px;left: 0px;height: 75px;width: 50px;background-color: red;border-radius: 25px 25px 0 0 ;}.heart:before{transform: rotate(-45deg);}.heart:after{transform: translateX(18px) rotate(45deg);}
</style>
<body><div class="heart"></div>
</body>

实现效果一样的
简单来看：代码更加量少了，性能优化

①html画桃心两种实现相关推荐

matplotlib 库画云图两种方法
本来还想整理一下,后面发现matplotlib官网有各种各样的画云图方法,而且各有各的美,官网链接 https://matplotlib.org/stable/gallery/index 2. 这里整 ...
python画素描画_Python素描画的两种程序解析
用python画素描画方式有多种,这里给大家分享常见的且操作简单的两种实现方式,一种用pillow库,一种用opencv库,这两个库的具体使用可百度,网上很多教程,这里不再赘述. 一.pillow实现 ...
UIBezierPath和CAShapeLayer画直线、CGContextRef画直线两种方案
在view的相关方法中可直接使用UIBezierPath和CAShapeLayer画图形- (void)makeBezierPath {/**CAShapeLayer属于QuartzCore框架,继承 ...
在origin 2018中同时画两个图，带errorbar和不带errorbar两种情况
在origin 2018中同时画两个图,带errorbar和不带errorbar两种情况在一个图层里同时画两幅图两幅图坐标可不一致 ①在当前图层中,选中图层左上角的 1 标志 ②右键 1 →图层内 ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
C语言实现画爱心（两种方式画法）
项目实战合集本专栏系列都是实战源码,可直接下载编译使用: 上一篇: C语言实现贪吃蛇(双人版本) 文章目录前言一.效果图欣赏二.代码实现 1.爱你一万年画法实现 2.爱如潮水画法实现总结新 ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
在几何画板中如何制作圆柱的侧面展开动画_几何画板画圆柱体的的两种动画制作方法...
和圆锥不一样,圆柱体的形成有两种方法,一种是由一个矩形面绕一条边旋转一周而成的,另一种是由圆面垂直向上或向下移动而成的.因此,制作圆柱形成演示动画要制作两种类型. 软件名称:最出色的教学软件几何画板 ...
html如何将图片做成六边形,css画正六边形的两种方法
说下两种css 制作正六边形的方法. 先看一下结果: 在之前要先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3): 方法一:原理把正六边形分成三部分,左中右分别 ...

①html画桃心两种实现

简单记录

html画桃心的两种实现

第一种代码

第二种代码

①html画桃心两种实现相关推荐

最新文章

热门文章