円弧のデザインにした要素を作成したかったのでCSSのborder-radiusを使用して表現してみました。
CSSで円弧にした要素を作成してやりたかったことは、以下の画像のように背景画像を組み合わせて、コンテンツ全体をカーブしたデザインにすることです。
円弧にするCSSのプロパティ
円弧を表示するCSSのプロパティは円や角丸を作ることができるborder-radiusプロパティを使用します。
border-radiusは一括指定をするCSSプロパティなので、たとえば、ボックスの上辺だけを円弧にして表示するなら以下のCSSのようにborder-radiusの値を記述します。
セレクタ{
border-radius: 1000px 1000px 0 0 / 300px 300px 0 0;
}
値の真ん中に記述しているスラッシュより前には横の半径を「左上」「右上」「右下」「左下」の時計回りの順で指定します。
スラッシュの後ろには縦の半径を「左上」「右上」「右下」「左下」の時計回りの順で指定します。
border-radiusを個別で指定するのが分かりやすいかもです。
一括指定したときのborder-radius: 1000px 1000px 0 0を個別指定した記述例は以下のCSSです。
セレクタ{
border-top-left-radius: 1000px 300px;
border-top-right-radius: 1000px 300px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
border-top-left-radiusの値を例にしたら、1000pxが横の半径を、300pxが縦の半径を指定しています。
すると要素の上辺だけに円弧をcssのborder-radiusで表示することができます。以下の画像はCSSでborder-radius: 1000px 1000px 0 0を、高さ300pxのdiv要素に適用したときのスクリーンショットです。
画面を狭くしているのですが「かまぼこ」みたいですよね…
もう少し、ゆるやかにカーブした円弧を表示できるようにして、かまぼこ円弧は卒業しようと思います。
border-radiusで上だけ円弧を表示
ネガティブマージンとoverflowを使い、要素の上だけをゆるやかにカーブした円弧をCSSで表示できるようにします。
まずはborder-radiusで上だけ円弧を表示するHTMLからです。
<div class="circle-content">
<div class="top-circle">
<h2>Draw an arc with css</h2>
<p>An arc is a part of the circumference</p>
<p>The point of drawing an arc with css is to control the corners of the element with border-radius</p>
</div>
</div>
circle-contentクラスを付けたdiv要素がCSSでoverflow:hiddenを適用することになります。
そしてtop-circleクラスの付いたdiv要素の上辺にCSSで円弧を表示します。
.circle-content {
overflow: hidden;
}
.top-circle {
background-color: #DE3F2B;
border-radius: 2000px 2000px 0 0 / 300px 300px 0 0;
margin: 16px -200px;
padding: 65px 280px;
min-height: 300px;
text-align: center;
}
CSSはcircle-contentをクラスセレクタにしてoverflow: hiddenを適用します。
次にtop-circleをクラスセレクタにしてborder-radiusを記述。border-radiusの値でボックスの左上と右上の角を横と縦の半径を数値で指定し上辺だけに円弧を描きます。
border-radiusで円弧を表示しただけでは、かまぼこ円弧なので、marginの左右を-200pxにしたネガティブマージンを適用します。
すると上の画像のように、要素の上だけが滑らかなカーブをした円弧をCSSのborder-radiusで表示することができます。
親要素のoverflow: hiddenが無いと、左右のマイナスマージン分、画面からはみ出してしまうことに気をつけます。
CSSで下だけを円弧状にした場合
CSSのborder-radiusで要素の下辺だけを円弧状に表示する場合は、border-radiusの値を修正するか、個別指定しているならプロパティと値を修正します。
border-radiusの場合
border-radius: 0 0 2000px 2000px / 0 0 300px 300px;
個別に指定する場合
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 2000px 300px;
border-bottom-left-radius: 2000px 300px;
下だけを円弧状にした要素を新しく作るときは、上だけに円弧を表示した要素をコピペして、cssでborder-radiusを適用する要素を新たなクラス名にして値を下円弧用に変更してあげれば良いだけですね。
これで、かまぼこ円弧は卒業でき、なめらかなカーブをした円弧をCSSのborder-radiusで表示することができました。
円弧の間に画像をCSSで表示
応用みたいことになりますが、要素の上辺と下辺にCSSで円弧を描いた2つのボックスの間に画像を表示すると以下のようなデザインが作れます。
円弧の間の画像はCSSで背景画像にして表示しています。
z-indexで背景画像と要素の重ね合わせ順を調整したり、positionで位置を調整しながらデザインできます。
角が丸くなるのが面白くて調子にのった私はハンバーガーメニューも円弧に。
円弧をCSSのborder-radiusで表示するとき、値のコントロール次第では、様々な丸みを帯びた表現ができるので、時間があるときにテストページにでも円弧だらけのコンテンツにして遊んでみると、新たなデザインパターンを発見できるかもしれません。
