CSS 삼각형

1 개요[ | ]

CSS triangle, CSS caret
CSS 삼각형, CSS 캐럿
CSS로 삼각형 그리기

Bootstrap에서 드롭다운 표시용 삼각형에 사용하는 방식

2 소스 코드[ | ]

<style>
.caret-up {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 4px solid;
}

.caret-down {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid;
}

.caret-right {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px solid;
}

.caret-left {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent; 
	border-right:4px solid; 
}
</style>

<b class="caret-up"></b>
<b class="caret-right"></b>
<b class="caret-down"></b>
<b class="caret-left"></b>

3 같이 보기[ | ]

4 참고[ | ]

http://css-tricks.com/snippets/css/css-triangle/