太极图绘制

来源：互联网发布：c 定义二维数组编辑：程序博客网时间：2024/05/29 09:41
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>太极八卦图</title>    <style>        .outer{            width: 200px;            height: 400px;            border:1px solid black;            border-radius: 200px 0 0 200px;            background: black;            float:left;        }        .outer1{            width: 200px;            height: 400px;            border:1px solid black;            border-radius:0 200px 200px 0;            background: white;            float:left;        }        .outer div{            width: 200px;            height: 200px;            /*border:1px solid black;*/            position:relative;        }        #lt{            border:0;            margin-left:100px;            margin-top:0;             border-radius: 100px;            background: white;        }        #lb{            margin-left:100px;            margin-top:0px;             border-radius: 100px;            background: black;        }        #rt{            width: 50px;            height: 50px;            margin-left: 175px;            margin-top: -325px;            border-radius: 25px;            background: black;        }        #rb{            width: 50px;            height: 50px;            margin-left: 175px;            margin-top:150px;            border-radius: 25px;            background: white;        }    </style></head><body>    <div class='outer'>        <div id='lt'>        </div>        <div id='lb'>        </div>        <div id='rt'>        </div>        <div id="rb">        </div>    </div>    <div class='outer1'></div></body></html>
html打开如下：
这里写图片描述
0 0