【DIV+CSS】程式碼作業練習DIV+CSS太極陰陽圖
阿新 • • 發佈：2019-01-30
1. DIV + CSS 練習：太極陰陽圖。
基本思路：由三個div塊元素組成；
#taiji太極陰陽圖底面
#yin太極陰陽圖陰面小圓
#yang太極陰陽圖陽面小圓
（太極陰陽圖：上為陽下為陰或左為陽又為陰）
2. 太極陰陽圖底圖#taiji：
巧用邊框：寬度0高度300px，左右邊框150分別150px；然後圓角處理作圓形。
#taiji{
margin:auto;
width:0;
height:300px;
border-left:150px solid #fff;
border-right:150px solid #000;
box-shadow: 0 0 20px 0 #333;
border-radius:100%;
}
3. 陰陽小圓，兩個眼分別用偽屬性:before或:after一個做小圓眼。
#yin{
width:150px;
height:150px;
border-radius:100%;
background:#000;
}
#yin:after{
position:absolute;
content:" ";
width:50px;
height:50px;
border-radius:100%;
background:#fff;
}
4. 定位組合，效果如圖：
5. 全部程式碼：
<!DOCTYPE html> <html> <head> <title> 飛天網事--DIV+CSS程式碼陰陽太極圖 </title> <meta charset="utf-8" /> <meta name="description" content="飛天網事，WEB前端開發，純css3程式碼時鐘精彩案例" /> <meta name="keywords" content="飛天網事，WEB前端開發，HTML5，CSS3，jQuery，" /> <meta name="author" content="R.tian @eduppp.cn 2015"> <link rel="shortcut icon" href="http://eduppp.cn/images/logo4.gif" /> <link rel="apple-touch-icon" href="http://eduppp.cn/images/logo.gif" /> </head> <body> <style type="text/css"> #taiji{ margin:auto; width:0; height:300px; border-left:150px solid #fff; border-right:150px solid #000; box-shadow: 0 0 20px 0 #333; border-radius:100%; } #yin{ position:absolute; margin:150px 0 0 -75px; width:150px; height:150px; border-radius:100%; background:#000; } #yin:after{ position:absolute; margin:50px 0 0 50px; content:" "; width:50px; height:50px; border-radius:100%; background:#fff; } #yang{ position:absolute; margin:0 0 0 -75px; width:150px; height:150px; border-radius:100%; background:#fff; } #yang:after{ position:absolute; margin:50px 0 0 50px; content:" "; width:50px; height:50px; border-radius:100%; background:#000; } </style> <div id="taiji"> <div id="yin"></div> <div id="yang"></div> </div> </body> </html>