サンプル

<div style="position: relative; height: 200px; width: 200px; background-color: white; border: 3px double black; border-radius: 100px;">
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(0,60%, 50%) solid; transform-origin: left top;"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(45,60%, 50%) solid; transform-origin: left top; transform: rotate(45deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(90,60%, 50%) solid; transform-origin: left top; transform: rotate(90deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(135,60%, 50%) solid; transform-origin: left top; transform: rotate(135deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(180,60%, 50%) solid; transform-origin: left top; transform: rotate(180deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(225,60%, 50%) solid; transform-origin: left top; transform: rotate(225deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(270,60%, 50%) solid; transform-origin: left top; transform: rotate(270deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(315,60%, 50%) solid; transform-origin: left top; transform: rotate(315deg);"></div>
</div>

やり方

線は border-top:1px black solid; 等として描く。width を使って長さをコントロールしている。別に hr でやってもいいのかもしれない。

CSS の transform の値に rotate を使えば要素を回転させられるので、これで線の向きをコントロールしている。ただし、回転の際に基準となる点はそのままだと要素の中央なので、これを transform-origin: left top; で左上にしている。

だいぶ邪道な気がするが、こんなやり方もできたよ、という例。また、点A から 点B という指定もできず、「点A からどの方向に長さいくつの」という指定しかできないのも難点。計算が必要となる。

この手の事やりかたかったら canvas や svg 使った方が楽。