【テクニック】CSSで半円・縁取り・弧を作る方法
CSSのみで半円、縁取りの半円、半円の弧の作り方を解説。WEB制作会社・デザイン会社様向けの下請け・外注・制作パートナーのフリーランスのIRODORI DESIGNが運営するブログです。
それぞれborder-radiusの向きを指定しなくてもtransform: rotate();を使用することで、全て同じ向きのborder-radiusで対応することも可能です。ただし、transform: rotate();を使用する場合、左右の時、若干位置取りが難しくなるため、実際使用するとなると先にご紹介した方法が実用的だと思います。こちらの方法はposition: absolute;と併用する場合は採用してもいい方法かもしれません。
.circle-top < width: 100px; height: 50px; background: #3d8582; border-top-left-radius: 50px; border-top-right-radius: 50px; >.circle-left < width: 100px; height: 50px; background: #3d8582; border-top-left-radius: 50px; border-top-right-radius: 50px; transform: rotate(-90deg); >.circle-right < width: 100px; height: 50px; background: #3d8582; border-top-left-radius: 50px; border-top-right-radius: 50px; transform: rotate(90deg); >.circle-bottom 実装サンプル縁取りの半円の作り方
CSS
.circle-top < width: 100px; height: 50px; background: #e8c72e; border-top-left-radius: 50px; border-top-right-radius: 50px; border: 2px solid; >.circle-left < width: 50px; height: 100px; background: #e8c72e; border-top-left-radius: 50px; border-bottom-left-radius: 50px; border: 2px solid; >.circle-right < width: 50px; height: 100px; background: #e8c72e; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border: 2px solid; >.circle-bottom 実装サンプル transform: rotate();を使用半円縁取りもtransform: rotate();を使用することで、全て同じ向きのborder-radiusで対応することも可能です。ただし、transform: rotate();を使用する場合、左右の時、若干位置取りが難しくなるため、実際使用するとなると先にご紹介した方法が実用的だと思います。こちらの方法はposition: absolute;と併用する場合は採用してもいい方法かもしれません。
CSS
.circle-top < width: 100px; height: 50px; background: #e8c72e; border-top-left-radius: 50px; border-top-right-radius: 50px; border: 2px solid; >.circle-left < width: 100px; height: 50px; background: #e8c72e; border-top-left-radius: 50px; border-top-right-radius: 50px; transform: rotate(-90deg); border: 2px solid; >.circle-right < width: 100px; height: 50px; background: #e8c72e; border-top-left-radius: 50px; border-top-right-radius: 50px; transform: rotate(90deg); border: 2px solid; >.circle-bottom 実装サンプル半円の弧の作り方
CSS
.circle-top < width: 100px; height: 50px; background: transparent; border-top-left-radius: 50px; border-top-right-radius: 50px; border: 2px solid; border-bottom: none; >.circle-left < width: 50px; height: 100px; background: transparent; border-top-left-radius: 50px; border-bottom-left-radius: 50px; border: 2px solid; border-right: none; >.circle-right < width: 50px; height: 100px; background: transparent; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border: 2px solid; border-left: none; >.circle-bottom transform: rotate();を使用半円の弧も他同様、transform: rotate();を使用することで、全て同じ向きのborder-radiusで対応することも可能です。ただし、transform: rotate();を使用する場合、左右の時、若干位置取りが難しくなるため、実際使用するとなると先にご紹介した方法が実用的だと思います。こちらの方法はposition: absolute;と併用する場合は採用してもいい方法かもしれません。
CSS
.circle-top < width: 100px; height: 50px; background: transparent; border-top-left-radius: 50px; border-top-right-radius: 50px; border: 2px solid; border-bottom: none; >.circle-left < width: 100px; height: 50px; background: transparent; border-top-left-radius: 50px; border-top-right-radius: 50px; transform: rotate(-90deg); border: 2px solid; border-bottom: none; >.circle-right < width: 100px; height: 50px; background: transparent; border-top-left-radius: 50px; border-top-right-radius: 50px; transform: rotate(90deg); border: 2px solid; border-bottom: none; >.circle-bottom 実装サンプルまとめ
関連記事一覧
【コピペOK】HTMLとCSSで作る図形：サンプルコード集 【テクニック】CSSで蛍光ペン風のマーカーを作る方法 【API不要】Googleマップの色をCSSで変更する方法Googleマップの色を変更したり、ピンをロゴに変更したりする場合、Google Maps APIを使用することで様々な […]
【WordPress】グーテンベルク色設定で 選択肢を変更する方法 【CSS】borderプロパティで枠線を引く方法 【jQuery】Slickスライダーで拡大しながら切り替わるスライダーの作り方この記事の目次を表示1 【jQuery】Slickスライダーで拡大しながら切り替わるスライダーの作り方1.1 実装例1. […]
【プラグイン不要】自作ポップアップを作成する方法 【テクニック】CSSでもっと見るボタンを実装する方法 【テクニック】ヘッダー固定の時、ページ内移動をヘッダー分ずらす方法 【jQuery】slickスライダーのページャーをメーターにカスタマイズする方法 【プラグイン不要】自作スライダーを作成する方法 【WordPress】404ページの作り方・リダイレクト方法の解説PICK UP!
【コピペOK】WEBデザインで使えるシンプルなボタンデザイン18選 RELEASE:2024.06.13 【アニメーション】スクロールに合わせて画像を表示するCSSサンプルコード10選 RELEASE:2024.06.11 【コピペOK】ボタンにホバーした時のCSSアニメーション15選 RELEASE:2024.06.09 【コピペOK】画像にホバーした時のCSSアニメーション20選 RELEASE:2024.06.08 【コピペOK】WEBサイトでよく使う見出しデザイン RELEASE:2023.11.22ADD
CATEGORY
ADD
NEW RELEASE
【JS不要！】CSSだけでスムーススクロールを実装する方法 RELEASE:2025.04.24 【WordPress】非公開記事のタイトルに付く「非公開:」を消す方法 RELEASE:2025.04.19 【WordPress】特定のカテゴリを除外して前の記事・次の記事のリンクURLを取得する方法 RELEASE:2025.04.18 【CSS】テキストのグラデーションをアニメーションさせる方法 RELEASE:2025.04.15 【Swiper】マスク効果で切り替えるアニメーションの実装方法 RELEASE:2025.04.14 【Basic認証】特定のディレクトリのみ認証を除外する方法・別の認証を設定する方法 RELEASE:2025.04.13 【Contact Form 7】送信先メールアドレスを複数設定する方法 RELEASE:2025.04.12 【PHP】日本語ファイルも対応！pathinfo()でファイル名を取得する方法 RELEASE:2024.08.25 【HTML／CSS】画像の一部分だけにモザイクをかける方法 RELEASE:2024.08.24 【HTML／CSS】レスポンシブ！PCとスマホで違う画像に切り替えて表示する方法 RELEASE:2024.08.23 【WordPress】プラグイン不要！カスタム投稿で「先頭に固定表示」する方法 RELEASE:2024.08.22 【HTML／CSS】aタグの中でaタグを使いたい時のコーディング方法 RELEASE:2024.08.21 【Contact Form 7】チェックボックスのデザインを変更する方法 RELEASE:2024.08.20 【CSS】斜めの背景やリンクを設定する方法 RELEASE:2024.08.19 【WordPress】ログイン環境だけテーマを切り替えるプラグイン「Theme Switcha」 RELEASE:2024.08.18ADD
RANKING
【PHPエラー】Warning: Undefined array key…の解決方法 RELEASE:2024.02.09 【Smart Custom Fields】SCFの使い方・出力方法 RELEASE:2022.08.01 【PHPエラー】Warning: Undefined variableの解決方法 RELEASE:2023.10.31 【PHPエラー】Parse error: syntax error, unexpectedの解決方法 RELEASE:2024.02.18 【テクニック】CSSでもっと見るボタンを実装する方法 RELEASE:2022.12.25 【PHPエラー】Warning: Array to string conversion inの解決方法 RELEASE:2024.02.20 【コピペ】CSSで矢印を作る方法／サンプルコード RELEASE:2024.02.10 【バリデーション】電話番号｜フォームの入力形式チェックを実装する方法 RELEASE:2023.10.25 【コピペOK】画像にホバーした時のCSSアニメーション20選 RELEASE:2024.06.08 【テクニック】aタグのリンクを無効にする方法 RELEASE:2024.01.16 【テクニック】電話番号に自動でリンク設定される機能を無効にする方法 RELEASE:2023.12.23 【Contact Form 7】選択項目ごとにメール送信先を変更する方法 RELEASE:2023.11.08 【PHPエラー】Fatal error: Call to undefined functionの解決方法 RELEASE:2023.11.03 【2024年版】YouTube動画再生後の関連動画を非表示にする方法 RELEASE:2024.02.22 【アニメーション】スクロールに合わせて画像を表示するCSSサンプルコード10選 RELEASE:2024.06.11ADD
フリーランス・SOHO｜WEB 制作一筋丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 I R O D O R I D ESIGN
CSSのみで半円、縁取りの半円、半円の弧の作り方を解説。WEB制作会社・デザイン会社様向けの下請け・外注・制作パートナーのフリーランスのIRODORI DESIGNが運営するブログです。