CSS 캐럿
Dev

CSS 캐럿

Joo 2017.08.03 14:24

custom 디자인의 select box를 만들려면 아래쪽 방향의 caret이 필요하다. 이미지로 만들어도 되지만 CSS로 간단히 만드는 방법이 있다. border를 이용한 방법인데 아주 신박하다. 각 border가 만나는 지점이 사선으로 처리된다는 것을 이용했다.

border-left:4px solid transparent;
border-right:4px solid transparent;
/* 아래쪽 */
border-top:4px solid #333;
/* 위쪽 */
border-bottom:4px solid #333;

이런 식이라면 위, 아래뿐만이 아니라 오른쪽, 왼쪽도 가능하다. 정말 창의적이고 대단한 방법이라는 생각이 들었다.

신고
«   2017/09   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30