CSSのみで三角形を作る方法
2021年5月28日タイトルの通り、CSSのみで「三角形」を作るチュートリアルです。
borderプロパティにこんな使い方があったとは…
それでは、サクッと作ってみましょう。
<div class=“sankaku”></div>
cssはこんな感じ
.sankaku{
width: 0;
height: 0;
border: 80px solid transparent;
border-top: 80px solid #f00;
}
高さと横幅のないブロック要素にborderを指定し、まず全てのborderを透過（transparent）します。
その後border-topに色を与えてあげると、下向きの三角形の出来上がりです。
各borderの挙動は以下の通り。
試しに、全てのborderに色を付けてみると…
.sankaku{
width: 0;
height: 0;
border-top: 80px solid #f00;
border-right: 80px solid #0f0;
border-bottom: 80px solid #00f;
border-left: 80px solid #000;
}
このような仕組みでCSSのみで三角形を作り事が出来ます。
とっても簡単なのでぜひ試してみてください。
関連サイト
パソコン教室
パソコン修理・販売・買取・サポート
