HTML&CSS29 css로 삼각형 만들기 2 삼각형 만들기 1편과 마찬가지로 border를 활용하여 삼각형 방향을 지정할 수 있습니다. 정삼각형과는 달리, 이번에 만들 삼각형은 너비(width)를 2곳만 지정합니다. 왼쪽 위 방향 top와 right에 수치를 넣어줍니다. 색상(border-color)은 top에만 넣고 나머지는 색상없음(transparent)으로 지정합니다. .triangle01 { width: 0; height: 0; border-style: solid; border-width: 80px 80px 0 0; border-color: #ffd67a transparent transparent transparent; } 오른쪽 위 방향 right와 bottom에 수치를 넣어줍니다. 색상(border-color)은 right에만 넣고 나머.. 2023. 3. 9. css로 삼각형 만들기 1 주로 border를 활용하여 삼각형을 만듭니다. 먼저, border-width에서 가리키고자 하는 방향의 반대방향의 수치를 적용합니다. 그리고 방향을 꼭지점까지 사선으로 감싸는 수치를 지정하게 되는데, 반대방향의 반만큼 지정합니다. 위쪽 방향 위쪽 방향은 bottom의 수치를 지정해주고, right와 left를 bottom의 1/2 수치로 지정해줍니다. .triangle01 { width: 0; height: 0; border-style: solid; border-width: 0 40px 80px 40px; border-color: transparent transparent #ffd67a transparent; } 아랫쪽 방향 아래쪽 방향은 top의 수치를 지정해주고, right와 left를 bottom.. 2023. 3. 9. 이전 1 2 3 4 다음
