おしゃれなタブのデザインを、CSSのborderプロパティを使って作る方法 コーディング

CSSで台形が作れる!応用すればおしゃれなタブのデザインも

CSSのborderプロパティで、おしゃれなタブのデザインを作ってみます。

borderプロパティの特性を利用すれば、一見画像が必要そうなこんなデザインも作れます。
borderの特性、台形ができる仕組みについてもご紹介していきます。

スポンサーリンク

borderプロパティの特性について

borderで三角形を作れることは有名ですね。
簡単に三角形を作れるジェネレーターが存在するので、それらを使って作成する方も多いと思います。

でも、どうしてborderで三角形が作れるのか、仕組みをご存じでしょうか。

三角形ができる仕組み

.example {
     width: 100px;
     height: 100px;
     border-top: 20px solid #a0dde2;
     border-left: 20px solid #e2a0b4;
     border-right: 20px solid #eec496;
     border-bottom: 20px solid #a0e2c2;
 }

まずは、上下左右の全方向にborderをかけてみましょう。
わかりやすく、それぞれ別の色を指定しています。

するとこうなります。
角の継ぎ目をよくみると、切り口が斜めになっていますね。
「borderとborderの継ぎ目は斜めになる」というのがborderプロパティの特性です。
この特性を利用し、三角形を作ることができます。

「.example」のwidthとheightをだんだん減らしていくとこのようになります。
一番右の「幅:0/高さ:0」をみると、三角形が4つできていますね。

使いたい部分以外を透明にすれば、三角形の完成です。

2辺に高さを指定すると、角度の違った三角形も作ることができます。

スポンサーリンク

どうやって台形を作るのか

今回作るタブの形は台形です。
borderの特性を利用すれば、台形も再現することができます。

上方向以外にborderをかけます。
グリーンの部分が台形になっていますよね。
だんだんと高さを減らしていくとわかりやすいと思います。

あとはグリーン以外の部分を透明にすれば、台形の完成です。

スポンサーリンク

タブを作る

台形の中に文字テキストをいれて複数並べれば、タブのデザインが完成します。

HTML

<ul class="example">
	<li class="ac"><a href="">タブテキスト</a></li>
	<li><a href="">タブテキスト</a></li>
</ul>

CSS

.example {
	display: flex;
}
.example li:not(:first-of-type) {
	position: relative;
	left: -5px;
}
.example li a {
	line-height: 30px;
	height: 0;
	padding: 0 15px;
	border-bottom: 30px solid #bacfda;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
.example li.ac {
	z-index: 2;
}
.example li.ac a {
	border-bottom-color: #f9fbfe;
}

<a>タグの高さは0にします。
「height: 0;」を指定しないと台形の外に文字が配置されてしまうので、必須の設定です。

デモ

スポンサーリンク

まとめ

おしゃれなタブデザインの作り方をご紹介しました。

疑似要素も使わずこれだけシンプルに書けるのは便利ですよね。
borderの特性が理解できていると色んなパターンが作れるので、理解を深めておきましょう。