순수한 CSS_Basic 튜토리얼로 삼각형(다양한 각도) 그리기

우리 웹페이지의 스타일은 CSS 덕분에 끊임없이 변화하고 있습니다. 단순해 보이는 이 스타일 언어는 창의력을 발휘하는 한 매우 유연하게 사용할 수 있으며 상상할 수 없는 많은 효과를 얻을 수 있습니다. 특히 CSS3의 광범위한 사용으로 인해 더욱 새로운 CSS 작품이 등장했습니다.

오늘은 CSS 삼각형 그리기 방법을 가져오겠습니다

코드 복사 코드는 다음과 같습니다:

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right : 50px 단색 투명
테두리 하단: 100px 단색 빨간색;
}

코드 복사 코드는 다음과 같습니다.

#triangle- 아래쪽 {
너비: 0;
높이: 0;
테두리 왼쪽: 50px 단색 투명;
테두리 오른쪽: 50px 고체 투명;
테두리 상단: 100px 단색 빨간색;
}

코드 복사 코드는 다음과 같습니다.

#triangle- 왼쪽 {
너비: 0;
높이: 0;
테두리 상단: 50px 단색 투명;
테두리 오른쪽: 100px 단색 빨간색;
테두리 하단: 50px 단색 투명;
}

코드 복사 코드는 다음과 같습니다.

#triangle- 오른쪽 {
너비: 0;
높이: 0;
테두리 상단: 50px 단색 투명;
테두리 왼쪽: 100px 단색 빨간색;
테두리 하단: 50px 단색 투명;
}

코드 복사 코드는 다음과 같습니다.

#triangle- topleft {
너비: 0;
높이: 0;
border-top: 100px 단색 빨간색;
border-right: 100px solid transparent;
}

코드 복사 코드는 다음과 같습니다.

#triangle- 상단 오른쪽 {
너비: 0;
높이: 0;
테두리 상단: 100px 단색 빨간색;
테두리 왼쪽: 100px 투명
}

코드 복사 코드는 다음과 같습니다.

#triangle- 하단왼쪽 {
너비: 0;
높이: 0;
테두리 하단: 100px 단색 빨간색;
테두리 오른쪽: 100px 단색 투명;
}

코드 복사 코드는 다음과 같습니다.

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100 px durchgehend rot;
    border-left: 100 px durchgehend transparent;
}