cssの1/2または1/4等線幅の円線を描く

Question

描く方法1/2または1/4 「等しく」 cssで線幅の円を描く方法は？
（ないSVG）

https://jsfiddle.net/ryxq1e91/

.circle { 
 
    position: relative; 
 
    display: inline-block; 
 

 
    width: 40px; 
 
    height: 40px; 
 

 
    background-color: red; 
 
} 
 
.circle >div { 
 
    top: 11px; 
 
    left: 14px; 
 
} 
 
.circle >div { 
 
    position: relative; 
 

 
    width: 12px; 
 
    height: 12px; 
 
    border-bottom-right: 1px solid rgba(40,40,40,1); 
 
    border-bottom: 1px solid rgba(40,40,40,1); 
 
    border-bottom-left: 1px solid rgba(40,40,40,1); 
 
    border-radius: 8px;  
 
}

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

Answer 1

完全なdivを維持したい場合、別のオプションとして、ほんの少しの境界線を作成してください。transparent。唯一の注意点は、45度回転したように見えることです。transform: rotate(45deg)で変換してください。

私はこれがどのようなサポートであるかわかりません。

1/4サークル

.circle { 
 
    position: relative; 
 
    display: inline-block; 
 

 
    width: 120px; 
 
    height: 120px; 
 

 
    background-color: red; 
 
} 
 
.circle >div { 
 
    top: 10px; 
 
    left: 10px; 
 
} 
 
.circle >div { 
 
    position: relative; 
 

 
    width: 100px; 
 
    height: 100px; 
 
    border-right: 1px solid transparent; 
 
    border-bottom: 1px solid rgba(40,40,40,1); 
 
    border-left: 1px solid transparent; 
 
    border-top: 1px solid transparent; 
 
    border-radius: 50px; 
 
    transform: rotate(45deg); 
 
}

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

1/2サークル

.circle { 
 
    position: relative; 
 
    display: inline-block; 
 

 
    width: 120px; 
 
    height: 120px; 
 

 
    background-color: red; 
 
} 
 
.circle >div { 
 
    top: 10px; 
 
    left: 10px; 
 
} 
 
.circle >div { 
 
    position: relative; 
 

 
    width: 100px; 
 
    height: 100px; 
 
    border-right: 1px solid rgba(40,40,40,1); 
 
    border-bottom: 1px solid rgba(40,40,40,1); 
 
    border-left: 1px solid transparent; 
 
    border-top: 1px solid transparent; 
 
    border-radius: 50px; 
 
    transform: rotate(45deg); 
 
}

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

Answer 2

それを修正するためにどのように行全体が等しくない幅はこのヘルプをい??

.circle { 
 
\t border-radius: 90px 90px 0 0; 
 
    -moz-border-radius: 90px 90px 0 0; 
 
    -webkit-border-radius: 90px 90px 0 0; 
 
\t height:45px; 
 
    width:90px; 
 
\t margin-top:0px; 
 
\t border:2px solid black; 
 
\t border-bottom:none; 
 
} 
 
\t 
 
.quarter-circle { 
 
    height:45px; 
 
    width: 45px; 
 
    -moz-border-radius: 150px 0 0 0; 
 
    border-radius: 150px 0 0 0; 
 
\t border:2px solid black; 
 
\t border-bottom:none; 
 
\t border-right:none; 
 
\t 
 
}

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

私はロードのアイコンにこれを有効にする楽しいだろうことを決めました。

\t 
 
.quarter-circle { 
 
    height:45px; 
 
    width: 45px; 
 
\t 
 
\t -moz-border-radius: 150px 0 0 0; 
 
    border-radius: 150px 0 0 0; 
 
\t border:2px solid rgba(0,0,200,.5); 
 

 
\t border-bottom:none; 
 
\t border-right:none; 
 
\t 
 
\t 
 
} 
 

 

 

 
@-webkit-keyframes rotating /* Safari and Chrome */ { 
 
    from { 
 
    -ms-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -webkit-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -ms-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -webkit-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes rotating { 
 
    from { 
 
    -ms-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -webkit-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -ms-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -webkit-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
.rotating { 
 
    -webkit-animation: rotating 2s linear infinite; 
 
    -moz-animation: rotating 2s linear infinite; 
 
    -ms-animation: rotating 2s linear infinite; 
 
    -o-animation: rotating 2s linear infinite; 
 
    animation: rotating 2s linear infinite; 
 
}

<div class="rotating" style="width:90px;height:90px;"><div class="quarter-circle"></div></div>

Answer 3

あなたはボックスの高さに応じてボックスの角を丸めるためにborder-top-left-radiusとborder-top-right-radiusプロパティを使用します（とボーダーを追加）することができます。

次に、効果を達成するために、ボックスの上下左右に境界線を追加します。

/2サークル

.half-circle { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: skyblue; 
 
    border-top-left-radius: 100px; 
 
    border-top-right-radius: 100px; 
 
    border: 10px solid gray; 
 
    border-bottom: 0; 
 
    
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

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

1月4日サークル

.half-circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: skyblue; 
 
    border-top-left-radius: 100px; 
 
    border: 10px solid gray; 
 
    border-right: 0; 
 
    border-bottom: 0; 
 
    
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

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

Answer 4

ここに行く：

https://jsfiddle.net/3ozvfgnr/

境界としたくない部分をカットし、同じ背景色を持っている要素によってオーバーレイされたボーダー半径との完全な円。

<div class="circle"> 
    <div class="overlay1"></div> 
    <div class="circlebasis"></div> 
</div> 
<div class="circle"> 
    <div class="overlay2"></div> 
    <div class="overlay3"></div> 
    <div class="circlebasis"></div> 
</div> 

●は{ 位置：相対。 幅：80px; 身長：80px; 背景色：赤; margin-bottom：5px; } .circlebasis { ボックスサイズ：border-box; トップ：18px; left：18px; 位置：相対; 幅：40px; 身長：40px; border：2px solid rgba（40,40,40,1）; border-radius：22px;

} 
.overlay1 { 
    box-sizing: border-box; 
    position:absolute; 
    width: 80px; 
    height: 40px; 
    border: none; 
    background-color: red; 
    z-index:1; 
} 
.overlay2 { 
    box-sizing: border-box; 
    position:absolute; 
    width: 80px; 
    height: 40px; 
    border: none; 
    background-color: red; 
    z-index:1; 
} 
.overlay3 { 
    box-sizing: border-box; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    width: 40px; 
    height: 80px; 
    border: none; 
    background-color: red; 
    z-index: 1; 
}