您现在的位置是:首页 > 博客网站制作 > CSS3|Html5CSS3|Html5

用css3 绘制心形图案

杨青青2013-04-16【CSS3|Html5】人已围观

简介用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;
    }
     

 

 

很赞哦! ()

文章评论

站点信息

打赏本站

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~

客服在线

服务时间

周一至周日 9:00-21:00