【CSS】台形や平行四辺形の作り方

CSSで台形や平行四辺形などのデザインを作る時は、少しのコツと注意点があります。

まずは実際のデザインを紹介します。

※使いまわしがしやすいように最低限のデザインにしてありますのでコピペして使ってみてください。

平行四辺形

まずHTMLについてですが、

<div class="btn parallelogram"><span class="btn-in">平行四辺形</span></div>

上記のように<div class="btn parallelogram">の中に<span class="btn-in">のような子要素を作った方が後々融通が利きます。

デザインの為のマークアップとなりますので、過度に子要素を作るのはアクセシビリティ上おすすめはしません。

少しのデザイン変更には耐えきれる程度の子要素数にしてください。

次にCSSについてです。

transform: skewX(-30deg);

上記が斜線を作る為のプロパティとなります。

skew : 「斜め」という意味の単語です。
skewX : 左右のborderに傾斜をつけます。
skewY : 上下のborderに傾斜をつけます。
skew(X, Y) : XとYに値を入れるとまとめて記述できます。

値はdegで指定します。

deg : degreeの略で、角度の単位になります。

今回は右肩上がりの斜線を作りたかったので -30deg = -30度　ということになります。

このままでは問題点が一つあります。

子要素全てにskewが掛かってしまうのでテキストまで -30degになります。

平行四辺形 : テキストを正常に戻したいとき

HTMLについては１と変更はありません。

CSSでの変更点は

.parallelogram.-two .btn-in { 
  transform: skewX(30deg); 
}

こちらは必ず.btn-inタグにあてるようにしてください。

.btnで傾斜をつけて、その中の.btn-inタグで元に戻すイメージです。

こういった修正をするためには子要素が必要となってきますので予め用意しておくと便利です。

デザイン的に矢印などの画像を配置する場合はbackgroundやbefore,afterなどの疑似要素でも対応可能です。

片側のみ傾斜を付ける台形

このデザインは少し難しくなります。

そして対応方法が複数あるので場合によってはこの方法じゃない方が適切かもしれません。（最後に少し解説します）

こちらもHTMLについては１、２と変更はありません。

CSSでの相違点は

.btnにborder-right: none;を付与してborder-rightを消しています。消さなくても対応は出来ますが消しておいた方が予想外のバグが生まれにくいです。

.btn-inにposition: relative;を付与しておきます。これは疑似要素を作る際にこの.btn-inを基準に位置を決めるためです。

.trapezoid .btn-in:after {
  background: #fff;
  border-bottom: 2px solid #00479d;
  border-right: 2px solid #00479d;
  content: '';
  height: 100%;
  position: absolute;
  top: 0;
  right: -10px;
  z-index: -1;
  width: 20px;
}

こちらが疑似要素になります。

border-rightを縦にするために疑似要素を重ねてあげるイメージです。

ただこちらの注意点としては高さや位置が決め打ちとなってしまうのでテキストが動的で2行や3行になる場合にはデザインが崩れる恐れがあります。

解決策が見つかり次第、記事を更新したいと思っています。