우리 웹페이지의 스타일은 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;
}
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
