您现在的位置是:首页 > 网站制作 > 前端设计

前端设计

用css3 绘制心形图案

杨青 2013-04-16前端设计

    源码:

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

 

 

文章评论