htmlとcssだけで作る三角形

htmlとcssだけで作る三角形。対応ブラウザはIEが7以上、firefox、chrome、operaなどは出回ってるバージョンすべてで問題なく使えます。

以下の例ではすべてdivを使っていますが、当然aタグでも大丈夫です。クリックさせる用途ならaタグの方が良いと思われます。

右三角形

html

<div id='triangleRight'></div>

css

#triangleRight{
	width: 0;
	height: 0;
	border-left: 100px solid #F00;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
}

左三角形

html

<div id='triangleLeft'></div>

css

#triangleLeft{
	width: 0;
	height: 0;
	border-right: 100px solid #F00;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
}

上三角形

html

<div id='triangleUp'></div>

css

#triangleUp{
	width:0;
	height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-bottom:100px solid #F00;
}

下三角形

html

<div id='triangleDown'></div>

css

#triangleDown{
	width:0;
	height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-top:100px solid #F00;
}

応用編

円の中に三角形を入れてみた。外側の円はdivにborder-radiusを設定している。当然css3に対応していないIE8以前のブラウザではちゃんと表示されない。

html

<div id='triangleInCircle'>
	<div id='triangleInCircleInner'>
		<div></div>
	</div>
</div>

css

#triangleInCircle{
	width:100px;
	height:100px;
	background:#666;
	border:1px solid #333;
	border-radius:50px;
}
#triangleInCircleInner{
	width:70px;
	height:70px;
	background:#FFF;
	border:1px solid #333;
	border-radius:35px;
	margin:14px auto;
}
#triangleInCircleInner div{
	width:0;
	height:0;
	border-left:56px solid #666;
	border-top:28px solid transparent;
	border-bottom:28px solid transparent;
	margin:7px 0 0 13px;
}