CSSで破線の円を作りたい

Question

CSSで破線の円を作りたいと思い、以下の処理で作成を行いました。

/*CSS*/
.ring {
  width: 1598px;
  height: 1598px;
  margin: -810px 0 0 -810px;
  border-width: 15px;
  border-style: dashed !important;
  border-radius: 952px !important;
  opacity: 0.2;
  -moz-transform: translateZ(75px);
  -webkit-transform: translateZ(75px);
  box-shadow: none;
}

この処理で破線の円は表示出来たのですが、
破線の終わりと始まりの部分の間隔が狭くなってしまい、間隔が均一になりませんでした。

破線の間隔を統一した円はどうすれば作成出来るでしょうか？

Answer 1

いくつかやり方があると思いますが、図形を書くのであれば SVG を使うといいと思いました。
stroke-dasharrayを変更すると、いろいろな破線が引けると思います。

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" class="dashed" />
</svg>

svg {
  height: 1598px;
  width: 1598px;
}

circle {
  fill: transparent;
  stroke: purple;
  stroke-width: 3;
}

.dashed {
  stroke-dasharray: 10, 4;
}

サンプルコード

Answer 2

radial-gradient() と repeating-conic-gradient() を組み合わせて

.ring {
  background-image: radial-gradient(#fff 68%, transparent 68% 70%, #fff 70%),
    repeating-conic-gradient(currentColor 0% 3%, transparent 3% 5%);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-conic-gradient
(Firefox 未対応)

と、これで一見簡単でよさそうですが、じつは背景を透過しないという問題があります。
そこで mask-image を使います。

.ring {
  background-image: repeating-conic-gradient(currentColor 0% 3%, transparent 3% 5%);
  -webkit-mask-image: radial-gradient(transparent 68%, currentColor 68% 70%, transparent 70%);
  mask-image: radial-gradient(transparent 68%, currentColor 68% 70%, transparent 70%);
}

https://developer.mozilla.org/ja/docs/Web/CSS/mask-image

Comments

[shinji709]

こんな簡単に朝日新聞社旗が描けるとは…勉強になりましたありがとうございます！
.asahi {
background-color: transparent;
color: red;
background-image: radial-gradient(currentColor 30%, transparent 30% 100%), repeating-conic-gradient(currentColor 0% 3%, transparent 3% 5%);
height: 600px;
width: 600px;
}

[x_x]

試したら予想以上にそっくり……やば

[oikashinoa]

この方法だと確実に均等な点線になるので良いですね

Answer 3

破線の間隔を統一した円はどうすれば作成出来るでしょうか？

どうしても厳密に実現したいなら、<canvas>に描くしかないかと思います。

borderの単位は細かく指定できないので、半端が出るのは仕方ないです。

Answer 4

回答としてはshgtkshruchさんが良いと思いました。
しかしoikashinoaさんのアイディア（の1.）も気になったのでやってみました。
点線の点の数の半数の空divを書かなければならない、それぞれのtransformのcss定義も書かなければならない、で実用は厳しい感じでした。
上述めんどくさい部分だけJS化したものがこちらです。
HTML側の書き方は、

<div class="circle"></div>

でデフォルト設定（半径100px、線幅2px、点線のひとつの点の長さ4px、点線の点の数64）で破線円を描きます。
設定を変更するなら以下のように書きます。

<div class="circle" style="--r: 200px; --line-width: 8px; --solid-length: 20px; --n-of-dash: 24;"></div>

Answer 5

原因は、dashedの線の合間がちょうど円の終了にきてしまっているからです。
これは、もう円の大きさ、もしくは線の太さを、ちょうどいい数値になるよういろいろ試してみるしかありません。
つまりこうなるのは仕様です。
さらに言えば、ブラウザによって挙動が違うことになります。
（線の間の大きさとかが変わる）
なので、最悪、画像や、他のプロパティを使うしかないでしょう。

dottedでもdashedでもない！CSSで好きな間隔の点線（破線）を作る方法 | amelog

を参考にされるといろいろアイディア浮かぶと思いますよ。

Answer 6

スマホからなので簡単に。

出来るか試して無いですし、cssは苦手です。以下出来るのかな？

1. 長方形をいくつも回転させて破線のもとにする
2. clip-pathでドーナツ上にくり抜く...path書くのが凄く大変なので止め。

Answer 7

破線てそういうものですよね？
エクセルなどの図形で書いてもつまるところはつまりますよ