用css3 绘制心形图案
程序员文章站
2022-07-12 23:08:10
...
闲来无聊，做做CSS3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.heart {
margin: 100px auto;
width: 160px;
height: 200px;
position: relative;
/* relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级 */
}
/* after 伪元素在元素之前添加内容*/
.heart:before {
content: " ";
border-radius: 100px 100px 0 0;
/* 正方形的内切圆的半径等于正方形边长的一半 */
width: 80px;
height: 120px;
/* 长方形 */
background: #669;
-moz-transform: rotate(-45deg);
/* 逆时针旋转45°*/
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
position: absolute;
/* absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位 */
left: 20px;
}
/* after 伪元素在元素之后添加内容*/
.heart:after {
content: " ";
width: 80px;
height: 120px;
background: #669;
border-radius: 100px 100px 0 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position: absolute;
left: 48px;
top: 0px;
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
效果图：
上一篇： c:联合体
下一篇： Spring AOP注解开发