border-radius 除了做邊框圓角效果之外，把它用在畫圖示上的話，其實能產生出很多不同的創意哩。筆者今天要繼續使用它來教各位畫-太極圖。
檢視原始碼 HTML
1 2 3 4 5 6 | <body> <div class="taichi"> <div class="white-circle"></div> <div class="black-circle"></div> </div> </body> |
因為太極圖中有一黑一白的圓，所以多放了兩個 div 在區塊中。
接著請張大眼仔細看，筆者要先將大區塊分成一白一黑：
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 | .taichi { position: relative; width: 48px; /* 50 - 2 */ height: 96px; /* 100 - 2 - 2 */ background: #fff; border: 2px solid #000; border-width: 2px 50px 2px 2px; border-radius: 50%; } |
一般的盒子模式(Box Model)是連同邊框寬度都計算在區塊的寬高中的，所以我們想要做一個寬高 100×100 的區塊，但邊框寬度如果是 2px 的話，那麼裡面的部份應該就是只有 96px。再來特別的是，筆者將右邊的邊框寬度直接設定成 50px，所以區塊內部的寬度就只需要 48px 就可以了。
當這樣設定好再加上 border-radius 圓角效果之後，就會變成~
嘿嘿~已經有一黑一白的區塊的，再來先補上一顆白圓：
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 | .white-circle { position: absolute; top: 0; left: 50%; background: #fff; border-radius: 50%; width: 48px; height: 48px; } |
這邊就是直接產生一個完整的白色圓形並放在上半部的中間：
那黑色圓形就是放在下半部囉：
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 | .black-circle { position: absolute; top: 50%; left: 50%; background: #000; border-radius: 50%; width: 48px; height: 48px; } |
看起來就已經有 9 成像囉~
最後還差兩個相反顏色的小圓點在這兩個圓形中，這兩個小圓點我們只要使用 ::after 擬元素(Pseudo-elements) 就可以了：
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .white-circle::after { content: ""; position: absolute; top: 17px; /* (50-16)/2 */ left: 17px; /* (50-16)/2 */ background: #000; border-radius: 50%; width: 16px; height: 16px; } .black-circle::after { content: ""; position: absolute; top: 17px; /* (50-16)/2 */ left: 17px; /* (50-16)/2 */ background: #fff; border-radius: 50%; width: 16px; height: 16px; } |
將將~是不是很神奇呢！？
看我轉啊轉...
See the Pen [CSS3]用 CSS3 畫圖示 - 太極圖 by abgne.tw (@abgne-tw) on CodePen.