摘要:
下文讲述使用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绘制爱心的方法分享