admin 管理员组

文章数量: 1086866

css 绘制心形图案

CSS3 transform-origin 属性设置旋转元素的基点位置。

注释：该属性必须与 transform 属性一同使用。

（1）首先，绘制背景：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>css3绘制心形图案</title><style>*{padding:0;margin:0;}.heart{width:100px;height:90px;position:relative;margin:100px auto;background-color:#E0E0E0;}</style></head><body><div class="heart"></div></body>
</html>


（2）绘制一个矩形：

.heart:before,.heart:after{position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 90px;background: #FF0000;}


（3）将矩形的左上角和右上角进行圆角化：

	.heart:before,.heart:after{position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 90px;background: #FF0000;border-radius: 50px 50px 0 0;}


（4）旋转：

	.heart:before,.heart:after{position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 90px;background: #FF0000;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%;}


（5）给矩形添加伪类：

	.heart:after{left: 0;transform: rotate(45deg);transform-origin: 100% 100%;}


<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>css3绘制心</title><style>*{padding:0;margin:0;}.heart{width:100px;height:90px;position:relative;margin:100px auto;}.heart:before,.heart:after{position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 90px;background: #FF0000;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%;-ms-transform: rotate(-45deg); 		/* IE 9 */-ms-transform-origin:0 100%; 		/* IE 9 */-webkit-transform: rotate(-45deg);	/* Safari 和 Chrome */-webkit-transform-origin:0 100%;	/* Safari 和 Chrome */-moz-transform: rotate(-45deg);		/* Firefox */-moz-transform-origin:0 100%;		/* Firefox */-o-transform: rotate(-45deg);		/* Opera */-o-transform-origin:0 100%;		/* Opera */}.heart:after{left: 0;transform: rotate(45deg);transform-origin: 100% 100%;-ms-transform: rotate(45deg); 		/* IE 9 */-ms-transform-origin:100% 100%; 		/* IE 9 */-webkit-transform: rotate(45deg);	/* Safari 和 Chrome */-webkit-transform-origin:100% 100%;	/* Safari 和 Chrome */-moz-transform: rotate(45deg);		/* Firefox */-moz-transform-origin:100% 100%;		/* Firefox */-o-transform: rotate(45deg);		/* Opera */-o-transform-origin:100% 100%;		/* Opera */}</style></head><body><div class="heart"></div></body>
</html>

本文标签： css 绘制心形图案

版权声明：本文标题：css 绘制心形图案 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1688027151a170432.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。