用css3 绘制心形图案
时间:2020-08-23来源:杨青青个人博客作者:杨青青
用css3 绘制心形图案,relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级
源码:
.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; }
你觉得文章内容怎么样