CSS3扩展了html和css的功能，它允许我们实现更复杂的样式。下面让我们看看，怎么使用css创建桃心形状
桃心可以通过两个基本的形状组成，一个正方形和两个圆形，如下图：
<html>
<head>
<title>绘制桃心</title>
<meta charset="UTF-8">
</head>
<style>
.my_true_heart{
position: fixed;
top: 30%;
left: 30%;
width: 200px;
height: 200px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: rgba(255,15,24, 1);
}
.my_true_heart:before{
position: absolute;
bottom: 0px;
left: -100px;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgba(255,15,24, 1);
}
.my_true_heart:before{
bottom: 0px;
left: -100px;
}
.my_true_heart:after{
position: absolute;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgba(255,15,24, 1);
}
.my_true_heart:after{
top: -100px;
right: 0px;
}
</style>
<body>
<div class="my_true_heart"></div>
</body>
</html>
网友评论