首页 > Web开发 > 详细

CSS构造心形

时间:2016-02-14 02:05:53      阅读:792      评论:0      收藏:0      [点我收藏+]

查看效果:

?http://hovertree.com/code/css/heartcss.htm

<!doctype html>
<title>纯CSS画心 by 何问起</title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯CSS画心 by 何问起" />
<meta name="description" content="纯CSS画心 by 何问起" />
</head>
<body>
  <style type="text/css">
    .hewenqiheart{width:160px;height:200px;position:relative}
.hewenqiheart:before{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:red;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);

position:absolute;left:20px;}
.hewenqiheart:after{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:red;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);
position:absolute;left:48px;top:0px;}
  </style>
  <h3>纯CSS画心 by 何问起</h3>
  <p>hovertree.com</p>
  <div class="hewenqiheart">
    
  </div>

</body>
</html>

?更多特效:?http://ini.iteye.com/blog/2165698?? ? ? ?

CSS构造心形

原文:http://ini.iteye.com/blog/2276256

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!