CSSで三角形を作成する

CSSで三角形を作成する

CSSで三角形を作成することをマスターしておけば、htmlで三角形をコーディングするたびにデザインデータから三角形のアイコンをicon.pngと命名する作業から解放されるかもしれません。

作り方

■css
sankaku:after{
content:””;
position:absolute;
width:0;
height:0;
border:10px solid transparent;
border:10px solid #ccc;
}

要素にborderを付ける場合、要素を囲むようにborderが適用されます。
borderの切り口は隣接するborderの大きさとの比率して角度がつきます。
そのため、各borderの形状は台形になります。

要素の幅・高さが0になると、台形の上辺が0になり、borderの形状三角ずつの四つ分割された用のなり、周りの三つの三角形を透明化すると三角形の完成です。