[解決済み] CSSやSVGで半円を描く
2022-02-05 20:23:18
質問
この円の下部をCSSかSVGで描画する方法を探しています。私が見たのは この答え しかし、それは完全な半円を扱っているのに対し、私は半分より少し少なくするために余分なセグメントを切り落とす必要があります。純粋なCSSでは不可能でしょうが、SVGでは修正が面倒になります。
<svg class="pie">
<circle cx="115" cy="115" r="110"></circle>
<path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path>
</svg>
解決方法は?
CSSでできます。
.partial-circle {
position: relative;
height: 20px;
width: 100px;
overflow: hidden;
}
.partial-circle:before {
content: '';
position: absolute;
height: 100px;
width: 100px;
border-radius: 50%;
bottom: 0;
background: #D08707;
}
<div class="partial-circle"></div>
また、2つのパーツを持つこともできます。
.partial-circle {
position: relative;
width: 100px;
overflow: hidden;
}
.partial-circle:before {
content: '';
position: absolute;
height: 100px;
width: 100px;
border-radius: 50%;
}
.partial-circle.top {
height: 80px;
}
.partial-circle.bottom {
height: 20px;
}
.partial-circle.top:before {
top: 0;
background: #E19B21;
}
.partial-circle.bottom:before {
bottom: 0;
background: #D08707;
}
<div class="partial-circle top"></div>
<div class="partial-circle bottom"></div>
関連
-
[解決済み】Text-decoration: noneが機能しない。
-
[解決済み] CSSを使用します。ウィンドウの幅の50%の背景色を設定する
-
[解決済み] ヘッダー付きCSSボックス
-
[解決済み] cssでこの要素を取得するには
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] CSSの三角形はどのように機能するのですか?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】なぜ私のdivは重なっているのですか?
-
[解決済み] CSSを使用します。ウィンドウの幅の50%の背景色を設定する
-
[解決済み] ChromeでCSSカスタムスタイルのボタンから青枠を削除する
-
[解決済み] Bootstrapのポップオーバーの幅を変更する
-
[解決済み] Bootstrapコンテナが複数またはネストされていませんか?
-
[解決済み] svgの円のダブルストロークの色
-
[解決済み] three.jsの背景を透明や他の色に変更する。
-
[解決済み] cssでこの要素を取得するには
-
[解決済み] CSSで背景画像を着色する方法を教えてください。
-
[解決済み] 入力・テキストフィールドの背景色