CSS 삼각형

개요

CSS triangle, CSS caret

CSS 삼각형, CSS 캐럿

CSS로 삼각형 그리기

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

소스 코드

<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>

같이 보기

• 삼각형
• 캐럿
• CSS
• 드롭다운
• Bootstrap

참고

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