前回
カラーサークルをCSSで作ろうとしたけど挫折した 後篇 改め カラーサークルをJavaScriptで作った - by shigemk2
なんか、このエントリーにコメントが来ていたので、読んでみると、
これ http://www.webcyou.com/?p=974
を使って三角形を円状に並べた上で、
divのボーダー白で太いものを上からかぶせて中心から円状に表示されるようにするとかで出来ませんかね？
ああ、なるほど。その手があったのか。
というわけで、やってみた。
HTMLとCSS、その概要
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CircleMKIII</title> <link rel="stylesheet" type="text/css" href="./css/circlemk3.css"> </head> <body> <div clsss="triangle" id="yellow"></div> <div clsss="triangle" id="limegreen"></div> <div clsss="triangle" id="green"></div> <div clsss="triangle" id="aqua"></div> <div clsss="triangle" id="blue"></div> <div clsss="triangle" id="bluish-purple"></div> <div clsss="triangle" id="purple"></div> <div clsss="triangle" id="violet"></div> <div clsss="triangle" id="red"></div> <div clsss="triangle" id="red-orange"></div> <div clsss="triangle" id="orange"></div> <div clsss="triangle" id="yellow-orange"></div> <div class="triangle" id="circle"></div> </body> </html>
div#yellow{ position: absolute; top: 150px; left: 150px; height: 0px; width: 0px; border-top:rgb(255, 255, 0) 140px solid; border-right:40px solid transparent; border-bottom:0px solid transparent; border-left:40px solid transparent; } #limegreen { -ms-transform : rotate(-30deg); -webkit-transform : rotate(-30deg); -moz-transform : rotate(-30deg); -o-transform : rotate(-30deg); -moz-transform-origin :bottom; -webkit-transform-origin :bottom; -o-transform-origin :bottom; -ms-transform-origin :bottom; position : absolute; top : 150px; left : 150px; height : 0px; width : 0px; border-top :rgb(0, 255, 128) 140px solid; border-right:40px solid transparent; border-bottom:0px solid transparent; border-left:40px solid transparent; } (以下略)
上記CSSのように、同じ形で違う色の二等辺三角形を、bottomを軸に30度ずつ回転していって
正十二角形を作成する。
その十二角形に、borderが太くて白い円をかぶせれば、カラーサークルが出来あがるのだ!!
完成品
うん、なんとか出来たね。
