私はCSSでかなり良いと思っていますが、アプローチする手がかりがないことを実感しました。カラーホイールです。このように：CSSでカラーホイール構造を作るにはどうすればいいですか？

これはさえCSSで行うことができますか？もしそうなら、どうですか？私はむしろキャンバスでそれを必要としないで作る必要はないでしょう。同じことがSVGにも当てはまりますが、私はキャンバスにそれを好むでしょう。

編集：「クリーン」（セクションが互いに重なり合ったより大きな形状ではなく正しい個々のシェイプであるため）、後で個々のセクションをアニメーション化することができます。いいだろう。私はそれがそれのように行うことができない場合、私は理解しています。

出典

2017-04-06 Anonymous

これは方法です。私のペンではありませんhttps://codepen.io/bitmap/pen/eBbHt –

私はSVGがおそらくあなたの最善の策だと言います。こうすることで、CSSで個々のパーツをターゲットにして、ホバー効果などを追加することができます。 – domsson

これはこれは本当にCSSのその複雑な形状は、SVGで作成する必要があり、それ

body { 
 
    margin: 60px auto; 
 
    background: #F5F5F7; 
 
} 
 

 
#colorWheel { 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    -webkit-transform-origin: 50px 150px; 
 
    -moz-transform-origin: 50px 150px; 
 
    -ms-transform-origin: 50px 150px; 
 
    -o-transform-origin: 50px 150px; 
 
    transform-origin: 50px 150px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    -o-user-select: none; 
 
    user-select: none; 
 
    -webkit-transition: all 0.5s linear; 
 
    -moz-transition: all 0.5s linear; 
 
    -ms-transition: all 0.5s linear; 
 
    -o-transition: all 0.5s linear; 
 
    transition: all 0.5s linear; 
 
} 
 
#colorWheel span { 
 
    position: absolute; 
 
    -webkit-transform-origin: 50% 50%; 
 
    border-style: solid; 
 
    border-width: 150px 50px; 
 
    box-sizing: border-box; 
 
} 
 

 
#colorWheel span.color01 { 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    border-color: #43a1cd transparent transparent transparent; 
 
} 
 

 
#colorWheel span.color02 { 
 
    -webkit-transform: rotate(36deg); 
 
    -moz-transform: rotate(36deg); 
 
    -ms-transform: rotate(36deg); 
 
    -o-transform: rotate(36deg); 
 
    transform: rotate(36deg); 
 
    border-color: #639b47 transparent transparent transparent; 
 
} 
 

 
#colorWheel span.color03 { 
 
    -webkit-transform: rotate(72deg); 
 
    -moz-transform: rotate(72deg); 
 
    -ms-transform: rotate(72deg); 
 
    -o-transform: rotate(72deg); 
 
    transform: rotate(72deg); 
 
    border-color: #9ac147 transparent transparent transparent; 
 
} 
 

 
#colorWheel span.color04 { 
 
    -webkit-transform: rotate(108deg); 
 
    -moz-transform: rotate(108deg); 
 
    -ms-transform: rotate(108deg); 
 
    -o-transform: rotate(108deg); 
 
    transform: rotate(108deg); 
 
    border-color: #e1e23b transparent transparent transparent; 
 
} 
 

 
#colorWheel span.color05 { 
 
    -webkit-transform: rotate(144deg); 
 
    -moz-transform: rotate(144deg); 
 
    -ms-transform: rotate(144deg); 
 
    -o-transform: rotate(144deg); 
 
    transform: rotate(144deg); 
 
    border-color: #f7941e transparent transparent transparent; 
 
} 
 

 
#colorWheel span.color06 { 
 
    -webkit-transform: rotate(180deg); 
 
    -moz-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
    border-color: #ba3e2e transparent transparent transparent; 
 
} 
 

 
#colorWheel span.color07 { 
 
    -webkit-transform: rotate(216deg); 
 
    -moz-transform: rotate(216deg); 
 
    -ms-transform: rotate(216deg); 
 
    -o-transform: rotate(216deg); 
 
    transform: rotate(216deg); 
 
    border-color: #9a1d34 transparent transparent transparent; 
 
} 
 

 
#colorWheel span.color08 { 
 
    -webkit-transform: rotate(252deg); 
 
    -moz-transform: rotate(252deg); 
 
    -ms-transform: rotate(252deg); 
 
    -o-transform: rotate(252deg); 
 
    transform: rotate(252deg); 
 
    border-color: #662a6c transparent transparent transparent; 
 
} 
 

 
#colorWheel span.color09 { 
 
    -webkit-transform: rotate(288deg); 
 
    -moz-transform: rotate(288deg); 
 
    -ms-transform: rotate(288deg); 
 
    -o-transform: rotate(288deg); 
 
    transform: rotate(288deg); 
 
    border-color: #272b66 transparent transparent transparent; 
 
} 
 

 
#colorWheel span.color10 { 
 
    -webkit-transform: rotate(324deg); 
 
    -moz-transform: rotate(324deg); 
 
    -ms-transform: rotate(324deg); 
 
    -o-transform: rotate(324deg); 
 
    transform: rotate(324deg); 
 
    border-color: #2d559f transparent transparent transparent; 
 
} 
 

 
#colorWheel:before { 
 
    content: ""; 
 
    width: 300px; 
 
    height: 300px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: -30px; 
 
    left: -130px; 
 
    border-radius: 100%; 
 
    border: 30px solid #ffffff; 
 
    z-index: 100; 
 
} 
 

 
#colorWheel:after { 
 
    content: ""; 
 
    width: 100px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 0px; 
 
    border-radius: 100%; 
 
    background: #ffffff; 
 
}

<div id="colorWheel"> 
 
    <span class="color01"></span> 
 
    <span class="color02"></span> 
 
    <span class="color03"></span> 
 
    <span class="color04"></span> 
 
    <span class="color05"></span> 
 
    <span class="color06"></span> 
 
    <span class="color07"></span> 
 
    <span class="color08"></span> 
 
    <span class="color09"></span> 
 
    <span class="color10"></span> 
 
</div>

出典

2017-04-06 22:23:10 repzero

これはあなたのものですか？ https://codepen.io/bitmap/pen/eBbHt –

ペン私はしばらく前にフォークし、それを修正しました – repzero

@MichaelCokerはい、それはペンです。あなたは私のコードの変更に気づいたことがありますか？ – repzero

にいくつかの変更を加えてフォークペンですのでご注意ください。

SVGカラーサークル

svg { 
 
    stroke: white; 
 
    stroke-width: 0.1; 
 
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
    <path id="piePiece" d="M 42.2,78.9 46.1,64.4 Q 50,65 53.88,64.48 L 57.7,78.9 Q 50,80 42.2,78.9Z" /> 
 
    </defs> 
 
    <use xlink:href="#piePiece" fill="#2D8633"/> 
 
    <use xlink:href="#piePiece" transform="rotate(30,50,50)" fill="#236467"/> 
 
    <use xlink:href="#piePiece" transform="rotate(60,50,50)" fill="#2E4172"/> 
 
    <use xlink:href="#piePiece" transform="rotate(90,50,50)" fill="#413075"/> 
 
    <use xlink:href="#piePiece" transform="rotate(120,50,50)" fill="#592A71"/> 
 
    <use xlink:href="#piePiece" transform="rotate(150,50,50)" fill="#8A2E60"/> 
 
    <use xlink:href="#piePiece" transform="rotate(180,50,50)" fill="#AA3C39"/> 
 
    <use xlink:href="#piePiece" transform="rotate(210,50,50)" fill="#AA6D39"/> 
 
    <use xlink:href="#piePiece" transform="rotate(240,50,50)" fill="#AA8539"/> 
 
    <use xlink:href="#piePiece" transform="rotate(270,50,50)" fill="#AA9739"/> 
 
    <use xlink:href="#piePiece" transform="rotate(300,50,50)" fill="#A9AA39"/> 
 
    <use xlink:href="#piePiece" transform="rotate(330,50,50)" fill="#A9AA39"/> 
 
</svg>

出典

2017-04-06 23:16:23 Persijn

これは私の仕事ではないですが、私はすべてのCSSバージョンのための優れた出発点となり、この4色のカラーホイールに出会っ：

http://jsfiddle.net/elias94xx/3rx7w/2/

.chart { 
 
    position: absolute; 
 
    width:0; 
 
    height:0; 
 
    border-radius: 60px; 
 
    -moz-border-radius: 60px; 
 
    -webkit-border-radius: 60px; 
 
} 
 

 
#chart1 { 
 
    border-right:60px solid red; 
 
    border-top:60px solid transparent; 
 
    border-left:60px solid transparent; 
 
    border-bottom:60px solid transparent; 
 
} 
 

 
#chart2 { 
 
    border-right:60px solid transparent; 
 
    border-top:60px solid green; 
 
    border-left:60px solid transparent; 
 
    border-bottom:60px solid transparent; 
 
} 
 

 
#chart3 { 
 
    border-right:60px solid transparent; 
 
    border-top:60px solid transparent; 
 
    border-left:60px solid blue; 
 
    border-bottom:60px solid transparent; 
 
} 
 

 
#chart4 { 
 
    border-right:60px solid transparent; 
 
    border-top:60px solid transparent; 
 
    border-left:60px solid transparent; 
 
    border-bottom:60px solid yellow; 
 
}

<div id="chart1" class="chart"></div> 
 
<div id="chart2" class="chart"></div> 
 
<div id="chart3" class="chart"></div> 
 
<div id="chart4" class="chart"></div>

出典

2017-04-06 23:30:07 gwally

CSSでカラーホイール構造を作るにはどうすればいいですか？

答えて

SVGカラーサークル

関連する問題