纯CSS代码实现心形效果完整案例 -六月初技术站

纯CSS代码实现心形效果完整案例

六月初 CSS 2024-04-17 22:29:57

心形图案所具备的特殊含义，想必就不需要多少了吧。在网站中将此会见到心形图案，那么关于该图案是如何实现的呢？

开发中关于心形的实现常见的方式有svg、canvas、图片、CSS四种方式来实现，每种方式难易程度不一样。

通过对于四种方法的优劣性对比，本篇文章就来详细介绍如何使用纯css实现心形图案效果。

最终效果如图：

爱心图案完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="heart"></div>
		<style>
			 #heart {  
			    position: relative;  
			    width: 100px;  
			    height: 90px;  
			}  
			#heart:before,  
			#heart:after {  
			    position: absolute;  
			    content: "";  
			    left: 50px;  
			    top: 0;  
			    width: 50px;  
			    height: 80px;  
			    background: red;  
			    -moz-border-radius: 50px 50px 0 0;  
			    border-radius: 50px 50px 0 0;  
				transform: rotate(-45deg);  
				transform-origin: 0 100%;  
			}  
			#heart:after {  
			    left: 0;  
				transform: rotate(45deg);  
				transform-origin :100% 100%;  
			}
		</style>
	</body>
</html>