[css] css로 삼각형만들기
in FrontEnd
엑셀에 보면 메모처리해놓은곳에 책 귀퉁이 접어놓은것처럼 표시가 되는데
웹에서도 만들어보고 싶어서 찾아보았당
.triangle{
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-right: 10px solid red;
border-bottom: 10px solid transparent;
-webkit-transform: rotate(134deg);
}
width와 height를 0으로 주면 삼각형이 되고, border-과 right는 삼각형의 높이와 width를 결정하고
bottom은 모서리의 방향을 조절해준다.
근데 그래도 내가 원하는 각도는 안나와서
rotate로 일정 각도를 돌려준다음 표시해주었다
완성!
