이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.
여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.
참고:
css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.
css지옥에서 탈출하자(2) - display와 인라인(inline), 블록(block) 그리고 div를 display를 이용해서 옆으로 나열
css지옥에서 탈출하자(3) - display와 flex, 세로로 뭔가 배치하고 싶다면 flexbox를 쓰자, (추가로 div를 flex로 나열, 비율에 맞게 div 세로로 배치)
css로 사각형은 잘 그리던데 삼각형은 그릴수 없나?
거두절미하고 가능하다!
우리가 그리고 싶은 삼각형은 딱 두종류일 것이다.(아니면 말고)
바로 모서리를 가르키는 삼각형과 변을 가르키는 삼각형이다.
둘은 만드는 방법은 차이가 있지만 원리는 동일 하다.
먼저 변을 가르키는 삼각형이다.
이게 제일 만들기 쉬운데 원리는 width와 height를 0으로준다.
그리고 모서리를 두껍게만드는데 이때 비율에 따라 삼각형의 모습이 갈린다.
top과 right를 주면 위쪽 모서리와 아래쪽 모서리가 생성되는데 색을 다르게 주면 경계를 기준으로 경계는 대각선이 된다.
따라서 삼각형이 완성되게 된다.
위의 예제의 경우 윗 경계를 부모색과 동일하게 해주고 아래는 본인이 원하는 색을 하면 삼각형이 완성된다.
이 때 div는 좌측 하단 모서리가된다.
모서리를 가르키는 삼각형의 경우에는
위 처럼 위 아래의 두께를 굵게하고 부모의 색으로한다.
그 다음 우측에 색을 입혀주면 완성된다.