如何动态显示爱心HTML,css 如何在html页面上输出一个“爱心”呢？

摘要:

下文讲述使用css脚本在页面上绘制一个“爱心”形状的方法分享,如下所示:

“爱心”是html中常用的一种形状，那么如何使用css脚本在html上绘制一个”爱心”呢？

实现思路:

1.绘制两个长方形

并设置长方形的圆角边框

2.对绘制的长方形进行旋转，拼接处“爱心”形状

如下所示:

例:

使用css绘制一个“爱心”形状的示例分享

maomao365.com

css 绘制 "爱心" 的示例分享

----

将div转换为爱心形状的方法分享

---

#aiXin {

position: relative;

width: 100px;

height: 90px;

}

#aiXin:before,

#aiXin:after {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background:green;

border-radius: 50px 50px 0 0;

transform: rotate(-45deg);

transform-origin: 0 100%;

}

#aiXin:after {

left: 0;

transform: rotate(45deg);

transform-origin: 100% 100%;

}

css绘制爱心的方法分享