CSSでborderだけ使って三角形を作ってみる
皆さんこんにちは。スキプラ(@riman_skillplus)です。
突然ですが、CSSで三角形作ってみたくないですか！？
li要素の前の黒丸を変えるとか。
実はCSSで簡単に作れるので、それがなぜ作れるのか？を解説しながら見ていきましょう。
borderには特殊な仕様がある
よく、borderって使いますよね。
まず、100px x 100pxの箱を用意してください。
分かりやすいように背景を黒にしてみましょう。
<body>
<div class="arrow"></div>
</body>.arrow {
width: 100px;
height: 100px;
background: #000;
}
うん。
じゃあこの箱の上部のボーダーを付けてみましょう。
$ cat css/border.css
.arrow {
width: 100px;
height: 100px;
background: #000;
border-top: 10px solid #EC2452;
}
赤いボーダーが付きました。
ここまでは想定どおりです。
じゃあ、右側にもボーダーを付けてみましょう。
$ cat css/border.css
.arrow {
width: 100px;
height: 100px;
background: #000;
border-top: 10px solid #EC2452;
border-right: 10px solid #F5BC52;
}
お？
なんか、borderが接する場所が斜めになってますね。・
そうなんです。borderはborder同士が接する場所が斜めになる性質を持っているんです。
この特殊な仕様を利用して三角形を作っていきます。
まず、一旦4箇所全部にborderを付けてみましょうか。
$ cat css/border.css
.arrow {
width: 100px;
height: 100px;
background: #000;
border-top: 10px solid #EC2452;
border-right: 10px solid #F5BC52;
border-left: 10px solid #513FFB;
border-bottom: 10px solid #5CD6AB;
}
見事に、全て斜めの接点ができてます。
borderだけの世界にしてみる
矢印を作るためには、この黒いもとの箱が邪魔ですね。
じゃあ、borderを太くしてみましょうか。
.arrow {
width: 100px;
height: 100px;
background: #000;
border-top: 50px solid #EC2452;
border-right: 50px solid #F5BC52;
border-left: 50px solid #513FFB;
border-bottom: 50px solid #5CD6AB;
}
borderだけが太くなってしまいます。
そう。borderはdivの外側についてくるものなので、borderが太くすればするほど、この外枠が太くなるだけなんです。
じゃあ逆に、div自体を小さくしたらどうなるんでしょうか。
.arrow {
/* divを小さくしてみる */
width: 10px;
height: 10px;
background: #000;
border-top: 50px solid #EC2452;
border-right: 50px solid #F5BC52;
border-left: 50px solid #513FFB;
border-bottom: 50px solid #5CD6AB;
}
おっ！！黒い部分が消せそう！！
もしかして、、、
widthとheightを0にしてみましょう。
き・・消えた！！
なんだか三角形が作れそうな気がしてきませんか？？
三角形を作ってみる！！
例えば、右向きの三角形を作りたい場合は、青だけ表示できれば良いですよね。
上向きの三角形を作りたければ緑だけ残せば良いですよね。
transparentという、透明を表現する指定を使ってみましょう。
どういうことか、まずは背景色を消して、上側のmarginだけ透明にしてみましょう。
.arrow {
/* div自体の大きさをなくす */
width: 0;
height: 0;
/*
背景色をなくす
background: #000;
*/
border-top: 50px solid transparent;
border-right: 50px solid #F5BC52;
border-left: 50px solid #513FFB;
border-bottom: 50px solid #5CD6AB;
}
おお、透明にした所だけ消えるのね。
ってことは、残したい部分以外を透明にしたらイケるじゃん！
ということで、さっきの「右向きの三角形を作りたい場合は、青だけ表示できれば良い」ってことは、青を表示してる、左側のborder以外を透明にしてみましょう。
.arrow {
/* div自体の大きさをなくす */
width: 0;
height: 0;
/*
背景色をなくす
background: #000;
*/
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-left: 50px solid #513FFB;
border-bottom: 50px solid transparent;
}
おおおおおお！！！
できた！！(歓喜！！！！)
各々の三角形を作ってみる
<body>
<div class="arrows">
<div class="arrow arrow-top"></div>
<div class="arrow arrow-left"></div>
<div class="arrow arrow-right"></div>
<div class="arrow arrow-bottom"></div>
</div>
</body>.arrow {
/* div自体の大きさをなくす */
width: 0;
height: 0;
}
.arrows {
display:flex;
justify-content: space-between;
width: 80%;
margin: 100px auto;
}
/* 下のmarginだけ残して上向きの三角形を作る */
.arrow-top {
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #5CD6AB;
border-left: 50px solid transparent;
}
/* 右のmarginだけ残して左向きの三角形を作る */
.arrow-left {
border-top: 50px solid transparent;
border-right: 50px solid #F5BC52;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
}
/* 左のmarginだけ残して右向きの三角形を作る */
.arrow-right {
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #513FFB;
}
/* 上のmarginだけ残して下向きの三角形を作る */
.arrow-bottom {
border-top: 50px solid #EC2452;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
}
できましたね！
【応用編】リスト要素の黒丸を三角形にしてみる
雑なリストを作ってみましょう。
<ul class="arrow-list">
<li><a href="">リスト1</a></li>
<li><a href="">リスト2</a></li>
<li><a href="">リスト3</a></li>
<li><a href="">リスト4</a></li>
<li><a href="">リスト5</a></li>
</ul>.arrow-list {
list-style-type: none;
}
.arrow-list li:before {
content: '';
display: inline-block;
/* 三角形を再現するために大きさを0にする */
width:0;
height:0;
/* 右向きの矢印を作るために左側のborderだけ残す */
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #513FFB;
}
できました！
【番外編】もう少し、横に長い三角形を作ってみる
ここまでできたら、こういうのも作ってみたいですよね。
これもこれまでのborderの仕様を把握してれば簡単です。
まず、上向きの三角形を作る場合、border-bottomだけ残せばそこが三角形になります。
このborder-bottomを長くして、左右のborderを細くすると細長い三角形が作れます。
/* 下のmarginだけ残して上向きの三角形を作る */
.arrow-top {
border-top: 50px solid transparent;
border-right: 20px solid transparent;
border-bottom: 70px solid #5CD6AB;
border-left: 20px solid transparent;
}面白いですね！ぜひ遊んで見てください！
さいごにお願い
もしこのnoteが参考になったら....
■ 最後にたった2つのお願い
① このnoteを「スキ」してください 🙇♂️
② このnoteの感想、何でも良いので @riman_skillplus 宛にください 🙇♂️
では、また次回！！
いいなと思ったら応援しよう！
