Css 八卦
<div class="box"> <div class="right_d"></div> <span class="back"> <span class="n1"></span> </span> <span class="backs"> <span class="n2"></span> </span> </div>
.box{ border:5px solid #333; border-radius:500px; width:500px; height:500px; position: relative; overflow:hidden; } .back{ background: #000; width: 250px; height: 250px; position: absolute; border-radius: 500px; left: 25%; } .backs{ background: #fff; width: 250px; height: 250px; position: absolute; border-radius: 500px; left: 25%; bottom:0; } .right_d{ background:#000; width:250px; height:500px; right:0; position:absolute; } .n1{ background:#fff; width:100px; height:100px; border-radius:100px; position:absolute; top:25%; left:25%; } .n2{ background:#000; width:100px; height:100px; border-radius:100px; position:absolute; bottom:25%; left:25%; }
人如代码,规矩灵活;代码如诗,字句精伦。