空のボーダーセクターとそのセクターコーナーの周りの丸いボーダーを持つ円の作成方法

Question

写真に関するすべての情報。 第二の溶液のための私のコード：ここで

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

.content { 
    width: 300px; 
    padding: 50px; 
    background: #3f63d3; 
} 

.circle { 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    border: 10px solid #fff; 
    border-top-color: transparent; 
    transform: rotate(45deg); 
} 

はJSFiddle exampleです。 アイデア

画像例：

PS：画像上の赤い円 - 問題の一部ではない、それはPaulie_Dがで述べたように、私は

Answer 1

:)について話しているものをほんの一例です彼のコメントは、あなたが必要とするものを達成する最良の方法は、SVGを使用することです。 stroke-linecap as roundを設定することで、単一のパス要素で行うことができます。その後、HTML divコンテナ内に配置することができます（必要に応じて絶対位置指定）。

SVGのpath要素とそのさまざまなコマンドの詳細情報は、this MDN tutorialにあります。

svg { 
 
    height: 100px; 
 
    width: 100px; 
 
    fill: none; 
 
    stroke: red; 
 
    stroke-width: 8; 
 
    stroke-linecap: round; 
 
}

<svg viewBox='0 0 100 100'> 
 
    <path d='M95,50 A45,45 0 0,1 5,50 A45,45 0 0,1 50,5' /> 
 
</svg>

CSSでこれを行うことは可能かもしれないが、それは、円弧の角度を変えることができ、特にSVG（に比べて超複雑になります - それは、その後CSSでなどを配置するために調整が必要になります円弧の角度が変わってもSVGは全く変更する必要はありません）。

Answer 2

.content { 
 
    width: 300px; 
 
    padding: 50px; 
 
    background: #3f63d3; 
 
} 
 

 
.circle { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    border: 10px solid #fff; 
 
    border-top-color: transparent; 
 
    transform: rotate(45deg); 
 
    position: relative; 
 
} 
 
.circle:after, .circle:before { 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: white; 
 
    content: ' '; 
 
} 
 
.circle:after { 
 
    right: 21px; 
 
    top: 21px; 
 
} 
 
.circle:before { 
 
    left: 21px; 
 
    top: 21px; 
 
}

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

Answer 3

アンドレイと非常に類似して答えが、容易に円の色を変更する代わりに、影と現在の色を使用。

もちろん、SVGは円の形状の長さを変更するために、擬似位置とサイズを再調整することを意味します。

/* Draw the bits of dots */ 
 

 
.content:before, .content:after { 
 
    color:currentColor; 
 
    content:''; 
 
    position:absolute; 
 
    z-index:1; 
 
    border-radius:10px; 
 
    
 
} 
 
.content:before { 
 
    box-shadow: 5px 0 ; 
 
    left:0; 
 
    width:50%; 
 
    height:9px; 
 
} 
 
.content:after { 
 
    right:50px; 
 
    bottom:-1px; 
 
    width:9px; 
 
    height:50%; 
 
    box-shadow:0 -5px ; 
 
} 
 
.content + .content {color:tomato;} 
 
/* see where bits of dots stand */ 
 
.content:hover:after, .content:hover:before { 
 
    color:black; 
 
    } 
 

 
/* reset color ? */ 
 
.content + .content {color:tomato;} 
 

 
/* original code */ 
 
.content { 
 
    color:white; 
 
    float:left; 
 
    padding: 50px; 
 
    background: #3f63d3; 
 
    position:relative; 
 
} 
 

 
.circle { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    border: 10px solid currentColor; 
 
    border-top-color: transparent; 
 
    transform: rotate(45deg); 
 
}

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