기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS3를 사용하여 삼각형을 그리려면 요소의 테두리 및 투명 테두리 속성을 사용하면 됩니다. 다음은 간단한 예제 코드입니다:

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* 左边框为透明，控制三角形的左斜边 */
    border-right: 50px solid transparent; /* 右边框为透明，控制三角形的右斜边 */
    border-bottom: 100px solid #f00; /* 底边框为实色，控制三角形的底边 */
}

이 예에서는 너비가 0이고 높이가 0인 요소를 만들고 세 개의 테두리를 설정하여 왼쪽 빗변, 오른쪽 빗변 및 삼각형의 밑변을 제어합니다. 테두리의 너비와 색상을 조정하여 다양한 스타일의 삼각형을 그릴 수 있습니다.

위의 코드를 HTML 요소에 적용할 수 있습니다. 예를 들면 다음과 같습니다.

 <div class="triangle"></div>

그러면 페이지에 삼각형이 표시됩니다.