用CSS实现阴阳八卦图等图形_html/css_WEB-ITnose
程序员文章站
2022-05-26 12:03:25
...
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
上一篇: PHP文件最后空一行的原因是什么?
下一篇: Ps制作可爱GIF动画小白兔大变活人
推荐阅读
-
用html5实现涂擦效果?_html/css_WEB-ITnose
-
用CSS代码写出的各种形状图形的方法_html/css_WEB-ITnose
-
用什么布局来实现_html/css_WEB-ITnose
-
用html5实现涂擦效果?_html/css_WEB-ITnose
-
用CSS3实现带小三角形的div框(不用图片)_html/css_WEB-ITnose
-
Android 用Animation-list实现逐帧动画_html/css_WEB-ITnose
-
用React加CSS3实现微信拆红包动画_html/css_WEB-ITnose
-
用React加CSS3实现微信拆红包动画_html/css_WEB-ITnose
-
怎么用CSS实现这样的背景_html/css_WEB-ITnose
-
用css3和canvas实现的蜂窝动画效果_html/css_WEB-ITnose