文档章节

用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
丰台
高级程序员
私信 提问

暂无文章

延迟队列实现精准的订单超时取消--自我记录备份

订单的超时取消很多系统采用定时任务,实际上达不到要求。我用的是延迟队列,但缺点是只实现了基于jvm的,分布式采用的是修改之前去查询订单状态,以及分布式锁获取的方式来控制,这样获得锁...

checkboxMan
28分钟前
1
0
storm 环境搭建

1.下载解压 下载地址:http://storm.apache.org/downloads.html #下载wget https://www-us.apache.org/dist/storm/apache-storm-1.2.2/apache-storm-1.2.2.tar.gz#解压tar -zxf apache......

MrPei
43分钟前
1
0
Python Base - 读写文件,字符串拼接,单引号

字符转义 读写文件cvs 字符串拼接,替换 import csvcsv_file_name = 'cardbin.csv'# insert into `card_bin_code` (name_of, code_of, card_no_prefix, bank_code) values ('中国银行......

园领T
44分钟前
1
0
基于JQUERY BOOTSTRAP 最简单的loading遮罩层

<%--loading遮罩层--%><div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">   <div style="width: 200px;height:20px; z-index: 20000; position: abs......

颖辉小居
45分钟前
1
0
springboot+kafka

1,首先springboot对kafka的支持也很好,同样是在配置文件中配置好参数,然后就可以直接使用。先说一下,很简单,,,不要怕 2,我用的依赖是 <dependency> <groupId>org.springframewor...

我真是小菜鸡
49分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部