読者です 読者をやめる 読者になる 読者になる

by shigemk2

当面は技術的なことしか書かない

カラーサークルをCSSで作ろうとしたけど挫折した 完結篇

CSS

前回
カラーサークルを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が太くて白い円をかぶせれば、カラーサークルが出来あがるのだ!!

完成品

うん、なんとか出来たね。