ヘッダー・見出しを、『片方だけ丸い・台形・矢印』などおしゃれデザインにできるCSS

今回はWebサイトでよくある『ガチガチ長方形とか正方形みたいな要素』ではない、ちょっと変わったデザインにしてみます。 使う場所によって『ヘッダー』とか『見出し』『フッター』などにも使えそうです。さらにCSSだけで実装できると、画像よりもデータ容量を削れるかもしれません。さっそくやってみましょう。

『boader-radius』で片方だけ丸くする

片方だけ丸くする実装例（画像）

右下だけ丸くしました。文字が左寄せになっていますが、右側に寄せてもよかったかもしれません。

片方だけ丸くするデザインのCSSコードとポイント

{width:100%; height:120px; background-color:#ccccff; border-radius: 0px 0px 100px 0px;}

boader-radiusを使うと、要素の境界線を丸くカーブさせることができます。普通に書くと4箇所がカーブしますが、CSSのマージンとかパディングみたいに『四カ所別々の値』を指定できます（順番は左上・右上・右下・左下と時計回り）。これで片方だけ丸くします。

『transform: skew』で傾斜させたデザインに

傾いたデザイン実装例（画像）

傾いたってよりは、台形っぽくなってしまいました。

傾いたデザインのCSSコードやポイント

{width:100%; height:120px; margin:auto; background-color:#ccccff; transform: skewX(-25deg);}

transform:skewX(30deg)のように書いて、要素を傾斜させることができます。degは角度（degree）のことです。X軸（横）とY軸（縦）の両方傾斜させるときは『transform:skewY(30deg) skewX(30deg);』みたいに書きます。

width:100%で傾斜してはみ出た分が隠れるので（どっかの親要素にoverflow: hidden;が指定されている）、中の要素にもtransform:skewは受け継がれるので、角度がきつすぎると文字が読めなくなります。

背景だけ傾斜して、中身は傾斜させないときには『擬似要素（beforeなど）z-index（重なり）position(位置)』などでうまく傾斜させずに重ねている方が多い印象です（今回は割愛します）

矢印みたいなデザイン（見出し向き）

矢印みたいなデザイン実装例（画像）

これ、gif画像とかじゃなくてCSSで実装です。ちょっと難しかったです。

矢印みたいなデザインCSSのコードやポイント

.midashi { line-height:40px; padding:0 0 0 20px; width:90%; height: 40px; position: relative; background:#ccccff; } .midashi:before { content: “”; position: absolute; right: -20px; bottom: 0; width: 0; height: 0; border-left: 20px solid #ccccff; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .midashi:after { content: “”; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-left: 20px solid white; border-top: 20px solid transparent; border-bottom: 20px solid transparent; }

htmlは『div class=”midashi”』でくくっています。左のへっこんだ部分と右の出た部分は、CSSの『before after擬似要素』beforeの部分はボックスの前にあるんだけど、マイナス指定して重ねています。beforeの三角形（border）は、背景色と同じ（ccccff・薄い紫）にして

widthに余裕があるのは100％だと飛び出た部分がoverflow: hidden;で、矢印がつぶれた感じになるため。スマホの狭い画面だと潰れる可能性があるので、メディアクエリでより狭いwidthを指定する必要があるでしょう。

また、この要素だと『vertical-align: middle;』が効かないので（テーブルセルやインラインにしか効かない）、line-heightをボックス高さと一緒にしたら縦が中央にそろいました。

矢印みたいなデザインCSS・参考サイト

なお、このデザインのコードはcss-tricks.comさんに記載されていたコードを参考にしました。いろいろな形の要素をCSSで作っているので、こちらも参考になさってください。

The Shapes of CSS | css-tricks.com
https://css-tricks.com/examples/ShapesOfCSS/

あとがき・まとめ

少しこったのをCSSだけでやるとコードが長くなってしまうんですが、今回のはシンプルめのものをチョイスしてみました。画像よりは軽く、コードもそこまで複雑化しないので、ぜひヘッダーや見出しなどに利用してみてください。