CSS 캐럿
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;
이런 식이라면 위, 아래뿐만이 아니라 오른쪽, 왼쪽도 가능하다. 정말 창의적이고 대단한 방법이라는 생각이 들었다.
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- 742,885
- Today
- 11
- Yesterday
- 41
TAG
- 영화
- electron
- github actions
- 레시피
- Ubuntu8.04
- Mac
- Firefox3
- Firefox
- 찬양
- 망치
- 글꼴
- IE
- virtualbox
- react
- 요리
- Eclipse
- ubuntu
- Linux
- 티스토리
- 보안
- Tistory
- electron 시작하기
- 리뷰
- 다음
- chrome
- Flutter
- 넷플릭스
- Daum
- 검색