用CSS实现阴阳八卦图等图形
用CSS实现阴阳八卦图等图形
FansUnion 发表于2年前
用CSS实现阴阳八卦图等图形
  • 发表于 2年前
  • 阅读 7
  • 收藏 0
  • 点赞 0
  • 评论 0

CSS还是比较强大的,可以实现中国古典的“阴阳八卦图”等形状。


正方形


   #rectangle { width: 200px; height: 100px; backgrount-color: red; }  #circle { width: 100px; height: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background-color: red; }

椭圆


#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

直角三角形

直角边left-top

#triangle-leftbottom { width: 0; height: 0; border-left: 100px solid red; border-top: 100px solid transparent; }
直角边right-top

#triangle-righttop { width: 0; height: 0; border-right: 100px solid red; border-top: 100px solid transparent; }

梯形


#parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); transform: skew(20deg); background: red; }

鸡蛋


#yin-yang { width: 96px; height: 48px; background: #eee; border-color: red; border-style: solid; border-width: 2px 2px 55px 2px; border-radius: 100%; position: relative; }

  #yin-yang:before { content: ""; position: absolute; top: 50%; left: 0; background: #eee; border: 18px solid red; border-radius: 100%; width: 12px; height: 12px; }

  #yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: red; border: 18px solid #eee; border-radius:100%; width: 12px; height: 12px; } 八卦图展示不出来,蛋疼,请下载HTML文件 http://download.csdn.net/detail/huoyingfans/7455161或者 去 http://blog.fansunion.cn/articles/3736 查看
更多文章请参考:http://www.itfriend.cn/user/FansUnion 

版权声明:本文为博主原创文章,未经博主允许不得转载。

共有 人打赏支持
粉丝 52
博文 857
码字总数 825464
×
FansUnion
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: