CSSコードで次のような形にする方法はありますか

-1

JavaScriptを使わずにCSSコードで次のような形にする方法はありますか？CSSコードで次のような形にする方法はありますか

2017-03-29 laudbob

はいつ以上の方法。 – DaniP

これは非常に単純なCSSコードによって達成することができます。常にユーザーに特にCSS3を発明により、実際のまたは非現実的な任意の形状を設計する能力を提供

div{ 
 
width:50px; 
 
height:50px; 
 
border-radius:50%; 
 
border:10px solid transparent; 
 
border-bottom-color:blue; 
 
}

<div> 
 
</div>

出典

2017-03-29 15:52:03

ありがとうございました。私はすでにあなたがしたのと同じ方法で、CSSでそれを行う方法を持っています:) – laudbob

次の2つの選択肢があります、たとえば、そのを得るために、いくつかの単純な形状（丸と四角）を使用して図形を描画するためにSVGを使用して（より良い方法）

を大きな円の青、そして小さな円の中の白：あなたは円を得るでしょう（それ以外のところでは、円を1つしかつ、青い枠をつけることができません）。次に、45°回転の2つの正方形と、その他の権利

彼らはこのような形を得るために多くの方法がありますが、svgを使うべきです。

出典

2017-03-29 14:46:43

私はちょうど最後の部分を強調したいですが "あなたはsvgを使うべきです" – John

SVGでこれをどうやって作ればいいですか？ – laudbob

@Johnなぜこのような場合にCSSを避けるべきですか？ – laudbob

のCss。

ここで私はあなたを作る方法を、あなたに私はCSSで作られたサンプルを与え、あなたが見ているとアイデアを得ることができます - >

#moon { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    box-shadow: 15px 15px 3px 0px rgb(10, 56, 132); 
}

私は他の人が述べたようにSVGを使用することが示唆されていますがあなたが特別なケースのためにそれを必要とするならば、なぜそうしないのですか？

！ムーン（

出典

2017-03-29 16:05:01 Milan

私は選択肢を追加する必要があります:)（追加するには、編集：インラインSVGなど）

<svg height="55" width="50"> 
<path d="M 45 40 A 25 25 0 0 1 5 40" stroke="blue" stroke-width="10" fill="none" /> 
    Sorry, your browser does not support inline SVG. 
</svg>

出典

2017-03-29 16:17:29 John

CSSコードで次のような形にする方法はありますか

答えて

関連する問題