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の特性が理解できていると色んなパターンが作れるので、理解を深めておきましょう。