• 微信
当前位置:首页 > 学无止境 > Web前端

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

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:dacesmiling@qq.com

标签:CSS3
微信

杨青青

Hi~如果您正好看到这里,可以扫一扫微信二维码加我为好友,我是一个喜欢交朋友的人,我知道您也是哦~

微信
阿里云