PcSchool.Club

パソコンを分かりやすく解説することを目指す無料のスキルアップサイトです

岐阜のパソコン教室「パソコンスクール・テルン」

CSSのみで三角形を作る方法

2016年1月8日

タイトルの通り、CSSのみで「三角形」を作るチュートリアルです。

borderプロパティにこんな使い方があったとは…

それでは、サクッと作ってみましょう。

 

<div class=“sankaku”></div>

 

cssはこんな感じ

.sankaku{
width: 0;
height: 0;
border: 80px solid transparent;
border-top: 80px solid #f00;
}
sankaku
高さと横幅のないブロック要素にborderを指定し、まず全てのborderを透過(transparent)します。
その後border-topに色を与えてあげると、下向きの三角形の出来上がりです。
各borderの挙動は以下の通り。
sikumi
試しに、全ての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;
}
zensankaku
このような仕組みでCSSのみで三角形を作り事が出来ます。
とっても簡単なのでぜひ試してみてください。