JS 正三角形から正六角形にするには

質問

JavScript で正三角形から正六角形にするには？

赤い円と一辺が１００ｐｘの正三角形を描きました。
青い正三角形は、頂点が円の中心にあり、２点が円周上にあります。
この時、ボタンを押したら６色の正六角形を描画します。（添付図参照）
それには、どのようなコードになりますか？

正三角形の色 (反時計回り)
blue -> red ->violet ->green -> orange -> lightgrey

<style>
.wrap3 {
margin: 0 auto;
position: relative;
width: 200px;
height: 200px;
border: solid 1px red;
border-radius: 50%;
}
.triangle3 {
position: absolute;
left: 50px;
top: 100px;
width: 0;
height: 0;
border-style: solid;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 87px solid blue;
border-top: 0;
}
</style>
<button id="btn3">正六角形にする</button>
<div class="wrap3">
<div class="triangle3"></div>
</div>

<script>
function draw() {
// ？
};
btn３.onclick = draw;
</script>

回答No.1

luka3

学校の課題ですよね。
できるだけ自分でも考えて欲しいので、こちらはヒントになります。
あまり美しくないし、もっといいやり方は他にもたくさんあると思いますが、わかりやすさ優先です。

function draw() {

var wrap3 = document.getElementsByClassName("wrap3")[0]; // 三角形を追加する親ノード
var triangle3 = wrap3.firstElementChild; // 最初の三角形

var triangle_red = triangle3.cloneNode(false); // 最初の三角形を複製
triangle_red.style.left = "100px"; // この描画領域(四角形)の左上のX座標
triangle_red.style.top = "100px";
triangle_red.style.borderTop = "87px solid red";
triangle_red.style.borderBottom = "0";
wrap3.appendChild(triangle_red); // 親ノードに追加

var triangle_yellow = triangle3.cloneNode(false);
triangle_yellow.style.left = "0";
triangle_yellow.style.top = "13px";
triangle_yellow.style.borderBottom = "87px solid yellow";
wrap3.appendChild(triangle_yellow);

};

お礼

ご回答ありがとうございます。 cssTextでまとめれば、もっとすっきりする。 ということになりますね。

Powered by GRATICA

補足

学校の課題ではありません。
私は、社会人で、質問内容は、自分でコーティングしてから、質問の形で識者の問題解決方法の知見を勉強させていただいている訳です。
したがって、ほとんどは、わからないから、質問しているということではありません。