您现在的位置是:首页 > 网页设计素材

用css3 绘制心形图案

杨青2018-09-26网页设计素材

简介源码:.heart{width:160px;height:200px;position:relative; /* relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通

源码:

.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;
}

 

 

 

 

郑重声明:

本站所有活动均为互联网所得,如有侵权请联系本站删除处理

评论

评论插件