2024年04月20日 css3 绘制 心形 图案 懒猪技术
源码：
.heart{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;
}
本文链接：http://so.lmcjl.com/news/2649/