用css3 绘制心形图案

  • A+
所属分类:CSS|Html
广告也精彩

源码:

.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;
}
用css3 绘制心形图案
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
广告也精彩

发表评论

您必须登录才能发表评论!