本文主要是介绍css3 如何画太极 和 奥运五环，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
太极
首先要明白太极的原理，如果手动去画一个太极应该怎么画
如下图是一个不完整的太极但说明了其组成
最终效果图：
代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">body {background-color: #e5e5e5;}.container {width: 400px;height: 400px;margin: 0 auto;border-radius: 50%;background-color: gray;overflow: hidden;position: relative;}.item {width: 50%;height: 100%; }.item1 {float: left;background-color: #000;}.item2 {float: right;background-color: #fff;}.top , .bottom {width: 50%;height: 50%;position: absolute;background-color: red;left: 25%;border-radius: 50%;text-align: center;line-height: 200px;}.top {background-color: #000;}.bottom {top: 50%;background-color: #fff;}.yin , .yang {width: 20%;height: 20%;background: red;border-radius: 50%;display: inline-block;}.yin {background-color: #000;}.yang {background-color: #fff;}</style></head><body><div class="container"><div class="item item1"></div><div class="item item2"></div><div class="top"><div class="yang"> </div></div><div class="bottom"><div class="yin"></div></div> </div></body>
</html>
五环
代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.big {width: 600px;height: 500px;margin: 0 auto;background-color: darkgray;position: relative;}.item {width: 150px;height: 150px;border: 20px solid red;border-radius: 50%;position: absolute;}.item1 {}.item2 {left: 190px;border-color: blue;}.item3 {left: 380px;border-color: green;}.item4 {border-color: yellow;top:100px;left:90px;}.item5 {border-color: black;top:100px;left: 290px;}.child {width: 150px;height: 150px;border-radius: 50%;position: absolute;}.item1-child {border-right: 20px solid red;z-index: 1;}.item2-child {border-bottom: 20px solid blue;z-index: 3;}.item2-child2 {border-right: 20px solid blue;z-index: 5;}.item3-child {border-bottom: 20px solid green;z-index: 2;}.item5-child {left: -20px;border-left: 20px solid black;z-index: 4;}</style></head><body><div class="big"><div class="item item1"><div class="child item1-child"></div></div><div class="item item2"><div class="child item2-child"></div><div class="child item2-child2"></div></div><div class="item item3"><div class="child item3-child"></div></div><div class="item item4"><div class="child item4-child"></div></div><div class="item item5"><div class="child item5-child"></div></div></div></body>
</html>效果图如下：
这篇关于css3 如何画太极 和 奥运五环的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
