::after 을 이용해 css 삼각형 , 화살표 가르키기 방향 ,

https://m.blog.naver.com/PostView.nhn?blogId=eunjin10914&logNo=221004085897&proxyReferer=https%3A%2F%2Fwww.google.com%2F

출처 윗 

이직을 하고 나서 무지 바빠져서 포스팅 할 시간이 없네요.
코드 정리하기도 시간이 빠듯합니다.
오늘은 제가 자주 사용하는 삼각형을 css로 그려보도록하겠습니다.
제목에서 언급한 것 처럼 ::after 를 사용할 건데요.
:after를 사용하며 IE9 이하에서도 맞출순 있지만 css로 transform을 사용하기때문에~!
IE9버전 이상부터 적용이 됩니다!

위의 이미지를 구현해 보도록 하겠습니다.
코드는 아주 간단합니다.

html <div class="area-main-ment"></div> css .area-main-ment{ background: #1c64d0; height: 168px; position: relative; } .area-main-ment::after{ position: absolute; bottom: -60px; left: calc(50% - 125px); content: " "; height: 0; z-index: -1; border-bottom: 120px solid; border-left: 125px solid rgba(0, 0, 0, 0); border-right: 125px solid rgba(0, 0, 0, 0); color: #1c64d0; transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); }

아주 간단하죠? 참 세모의 크기를 줄이고 싶으시면, border의 값들을 조정하시면되며, 화살표의 방향을 바꾸시면 transform 의 값을 바꾸시면 됩니다.