CSS/CSS 기초
[CSS]가상선택자 :before / : after 활용하기
알찬 퍼블리셔
2019. 5. 23. 16:51
728x90
반응형
해당 태그 앞과 뒤에 생기는 가상선택자로
content 속성이 꼭 있어야한다.
목록의 리스트 도형을 만들 수도 있고
아래와같이 꾸밈에 사용할 수도 있다.
아래와같은 코드로 삼각형모양을 만들 수 있다.
선은 아래와 같이 표현된다.
기본 투명으로 선을 원하는 높이만큼의 두께로 그린뒤 - transparent (투명)
원하는 방향의 선 색을 주면 삼각형 모양으로 나온다. 이를 이용해 위에처럼
리본을 만들수도 있고 말풍선을 만들수도있다.
border: 10px solid transparent;
border-top-color:#000;
728x90
반응형