CSSで緩い円弧の枠を作成するコードを紹介します。
概要
こちらの記事では、CSSで角丸の枠を表現するコードを紹介しました。角丸の半径を大きくすることで、円弧を持つ枠を作成することができます。
この記事では、さらに、緩い円弧を持つ枠をCSSで表現するコードを紹介します。
方針
緩い円弧を作成する場合は、縦と横の半径を異なる値にする方法で表現できます。楕円形を表現するコードと同様のコードを利用します。
書式
border-radiusプロパティの次の書式を利用して表現できます。
border-radius:(左上の水平半径) (右上の水平半径) (右下の水平半径) (左下の水平半径) / (左上の垂直半径) (右上の垂直半径) (右下の垂直半径) (左下の垂直半径);
例1:右側に円弧のある枠
円弧の場合
コード
以下のHTML、CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="RightRoundBorderFrame.css" />
</head>
<body>
<h2>角丸枠のデモ</h2>
<div class="SectionCaption">セクション1</div>
<p>コンテンツです。あいうえお、かきくけこ、さしすせそ</p>
<div class="SectionCaption">セクション2</div>
<p>コンテンツです。あいうえお、かきくけこ、さしすせそ</p>
</body>
</html>
.SectionCaption {
background-color: #0036b6;
border-radius:0 2rem 2rem 0;
width:120px;
color:#FFFFFF;
padding: 0.5rem 0 0.5rem 1rem;
}
実行結果
上記のHTMLをWebブラウザで表示します。下図のページが表示されます。右側に円弧のある枠が描画できています。
緩い円弧の場合
緩い円弧を作成する場合です。
コード
以下のHTML、CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="RightLooseRoundBorderFrame.css" />
</head>
<body>
<h2>角丸枠のデモ</h2>
<div class="SectionCaption">セクション1</div>
<p>コンテンツです。あいうえお、かきくけこ、さしすせそ</p>
<div class="SectionCaption">セクション2</div>
<p>コンテンツです。あいうえお、かきくけこ、さしすせそ</p>
</body>
</html>
.SectionCaption {
background-color: #0036b6;
border-radius:0 1rem 1rem 0 / 0 2rem 2rem 0;
width:120px;
color:#FFFFFF;
padding: 0.5rem 0 0.5rem 1rem;
}
解説
以下の
border-radiusで緩い円弧を表現します。下記のコードでは水平の半径と垂直の半径を半分の値としています。
border-radius:0 1rem 1rem 0 / 0 2rem 2rem 0;
実行結果
上記のHTMLをWebブラウザで表示します。下図のページが表示されます。右側に円弧のある枠が描画できています。
先の結果の円弧より緩い円弧が描画されています。
例2:下に円弧のある枠
円弧の場合
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="BottomRoundBorderFrame.css" />
</head>
<body>
<h2>角丸枠のデモ</h2>
<div class="SectionCaption">Step1</div>
<p>コンテンツです。あいうえお、かきくけこ、さしすせそ</p>
<div class="SectionCaption">Step2</div>
<p>コンテンツです。あいうえお、かきくけこ、さしすせそ</p>
</body>
</html>
.SectionCaption {
text-align:center;
background-color: #0036b6;
border-radius: 0 0 5rem 5rem;
width: 64px;
color: #FFFFFF;
padding: 1.5rem 1rem 4rem 1rem;
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。下側が円弧の枠が表示できています。
緩い円弧の場合
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="BottomLooseRoundBorderFrame.css" />
</head>
<body>
<h2>角丸枠のデモ</h2>
<div class="SectionCaption">Step1</div>
<p>コンテンツです。あいうえお、かきくけこ、さしすせそ</p>
<div class="SectionCaption">Step2</div>
<p>コンテンツです。あいうえお、かきくけこ、さしすせそ</p>
</body>
</html>
.SectionCaption {
text-align: center;
background-color: #0036b6;
border-radius: 0 0 5rem 5rem / 0 0 2rem 2rem;
width: 64px;
color: #FFFFFF;
padding: 1.5rem 1rem 2rem 1rem;
}
解説
以下の
border-radiusで緩い円弧を表現します。下記のコードでは水平の半径を5rem、垂直の半径を2remとしています。
border-radius: 0 0 5rem 5rem / 0 0 2rem 2rem;
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
下側が円弧の枠が描画されます。先の例と比較すると緩い円弧で描画できていることが確認できます。
CSSで緩い円弧の枠を表現できました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-07-02
作成日: 2024-03-27
