文档章节

用CSS实现阴阳八卦图等图形

FansUnion
 FansUnion
发布于 2015/10/22 10:29
字数 264
阅读 7
收藏 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 

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

© 著作权归作者所有

共有 人打赏支持
FansUnion
粉丝 57
博文 858
码字总数 825464
作品 0
丰台
高级程序员
私信 提问

暂无文章

 SQL与NoSQL数据库入门基础知识详解

这几年的大数据热潮带动了一激活了一大批hadoop学习爱好者。有自学hadoop的,有报名培训班学习的。所有接触过hadoop的人都知道,单独搭建hadoop里每个组建都需要运行环境、修改配置文件测试等...

左手的倒影
5分钟前
0
0
Jenkinsfile

node { wrap([$class: 'BuildUser']) { def user = env.BUILD_USER_ID println user }}def InPutCheckBranch(){ timeout(time:10, unit:'SECONDS') { I......

whhbb
11分钟前
0
0
如何去设计前端框架能力?星巴克消息开放项目从0到1,从点到面的思考

本文由淘宝前端工程师罗嗣分享,主要讲述了作者在星巴克消息开放项目中的总结和思考,希望对大家有帮助,让业务分享更加有价值。 摘要 从满足星巴克项目需求单点出发,发散到从点到面的思考。...

阿里云官方博客
15分钟前
0
0
如何在多Kubernetes集群和多租户环境中使用Prometheus监控

过去十年里,我一直在虚拟化和云计算领域工作,在VMware、Mercury Interactive和Oracle领导产品管理工作,并格外关注DevOps方向。直到2014年,我开始认真关注并研究容器。当2015年Kubernete...

RancherLabs
17分钟前
0
0
如何在Chrome浏览器中启动deviceready事件(尝试调试phonegap项目)?

我正在开发PhoneGap应用程序,我希望能够在Chrome中调试它,而不是在电话上调试。但是,我在onGetReady()函数中初始化我的代码,该函数在PhoneGap触发“deviceready”事件时触发。由于Chr...

kisshua
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部