순수한 CSS를 사용하여 다각형을 그리는 방법은 무엇입니까? 이번 글에서는 순수 CSS를 시작으로 삼각형을 그리는 방법을 소개하고, 사각형, 오각형, 육각형을 그리는 방법도 비유적으로 그려볼 수 있으니 많은 분들께 도움이 되었으면 좋겠습니다!
오늘은 인터뷰에서 자주 테스트되는 CSS 질문을 CSS를 사용해 다각형을 그리는 방법으로 공부해보겠습니다. 이번에는 삼각형, 사각형, 오각형, 육각형을 예로 들어 시작하기 전에 몇 가지 필요한 지식을 이해해야 합니다.
이번에는 이러한 도형을 그리기 위해 순수한 CSS 지식을 사용하여 먼저 필요한 기본 CSS 지식 포인트인 CSS 상자 모델을 배웁니다. [관련 추천: "css 영상 튜토리얼"]
위 그림에서 볼 수 있듯이 표준 박스 모델은 content, padding, border, margin으로 구성되어 있습니다. 코드를 사용하는 특정 상황.
 "163176067422623CSS FAQ: 다각형 그리는 방법(삼각형 ~ 육각형)")
/*css部分*/ #main { width: 100px; height: 100px; border: 200px solid red; }
렌더링은 다음과 같습니다.
말로만 하고 연습하지 않고 이제 기본 CSS 속성을 사용하여 일반적인 삼각형, 사각형, 오각형을 그려 보겠습니다...
background-color 속성을 사용하여 사각형을 직접 그릴 수 없는 경우 위 그림을 보면 내용의 너비와 높이를 0으로 설정하고 테두리의 너비와 높이를 설정하면 다음과 같은 결과를 얻을 수 있음을 알 수 있습니다. 사각형은 테두리로 구성됩니다. 사각형은 정사각형, 평행사변형, 직사각형 등으로 구분됩니다. 여기서는 테두리를 사용하여 위의 세 가지 모양을 구현해 보겠습니다.
먼저 가장 간단한 정사각형을 구현해 보겠습니다.
 "163176067990052CSS FAQ: 다각형 그리는 방법(삼각형 ~ 육각형)")
#main { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 200px solid black; border-right: 200px solid blue; border-top: 200px solid pink; }
효과는 아래와 같습니다:
2.1.1에서는 이미 테두리를 사용하여 사각형을 구현했으므로 다음에는 배운 내용을 바탕으로 사각형을 구현해 보겠습니다. 지식을 바탕으로 길이 ≠ 너비가 되도록 정사각형의 길이와 너비만 조정하면 됩니다.
 "163176068680530CSS FAQ: 다각형 그리는 방법(삼각형 ~ 육각형)")
#main { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 100px solid red; border-right: 100px solid red; border-top: 200px solid red; }
효과는 아래 그림과 같습니다.
PS: 평행사변형을 구현하려면 두 개의 삼각형을 사용해야 하므로 여기서는 건너뛰는 것이 좋습니다. 2.2 먼저 삼각형 구현을 본 다음 다시 돌아가서 여기에서 평행사변형 방법을 살펴보세요.
여기에서는 2.2의 내용을 모두 읽었다고 가정합니다. 다음으로 평행사변형을 구현해 보세요.
 "163176069192416CSS FAQ: 다각형 그리는 방법(삼각형 ~ 육각형)")
*{ margin: 0; } #wrapper { position: relative; } .public { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 200px solid transparent; border-right: 200px solid transparent; border-top: 200px solid transparent; position: absolute; } .move { transform: rotate(180deg); top: 200px; left: 200px; }
효과는 아래 사진과 같습니다.
지금까지 가장 간단한 사각형이 완성되었으니 이때 벌써 느낌이 오시나요? 계속해서, 테두리는 사각형을 구현할 수 있으므로 삼각형은 문제가 되지 않습니다. 물론 각도에 따라 예각삼각형, 직각삼각형, 둔각삼각형으로 나눌 수 있습니다. 일회.
먼저 콘텐츠의 너비와 높이가 모두 0일 때 테두리의 왼쪽, 오른쪽, 위쪽, 아래쪽이 차지하는 상황을 살펴보겠습니다.
 "163176069746383CSS FAQ: 다각형 그리는 방법(삼각형 ~ 육각형)")
#main { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 200px solid black; border-right: 200px solid blue; border-top: 200px solid pink; }
렌더링은 다음과 같습니다.
그림에서 볼 수 있듯이 왼쪽, 오른쪽, 위쪽, 아래쪽이 모두 삼각형을 차지하므로 특정 삼각형이 필요할 때 다른 삼각형만 숨기면 됩니다. 세 개의 삼각형 그게 다입니다. 투명 속성 값을 사용하여 테두리를 숨길 수 있으므로 구현해 보겠습니다.
 "163176070541716CSS FAQ: 다각형 그리는 방법(삼각형 ~ 육각형)")
#main { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 200px solid transparent; border-right: 200px solid transparent; border-top: 200px solid transparent; }
효과는 그림과 같습니다.
이제 위 그림을 바탕으로 예각삼각형을 그릴 수 있습니다. 두 개의 테두리 면을 보여주세요. 코드를 사용해 보겠습니다
 "163176070960490CSS FAQ: 다각형 그리는 방법(삼각형 ~ 육각형)")
#main { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 200px solid red; border-right: 200px solid transparent; border-top: 200px solid transparent; }
효과는 그림과 같습니다.
위 그림은 이전 아이디어의 타당성을 확인합니다. 그럼 둔각삼각형을 어떻게 구현하는지 생각해 볼까요? 이전의 생각은 불가능하기 때문에 생각을 바꿔야 합니다.
我们可以用两个直角三角形，将小的直角三角形覆盖在大的上面，让我们试一下吧！！
 "163176071431934CSS FAQ: 다각형 그리는 방법(삼각형 ~ 육각형)")
#main1 { width: 0px; height: 0px; border-bottom: 200px solid red; border-left: 200px solid transparent; } #main2 { width: 0px; height: 0px; border-bottom: 200px solid black; border-left: 150px solid transparent; position: absolute; /*这里8px是浏览器中的margin自带的间距，之前没有处理*/ top: 8px; left: 58px; }
效果图如下所示：
这次通过绝对定位来控制小的直角三角形，那么我们可以通过控制黑色三角形的颜色来显示钝角三角形。
三角形都已经学会了，那么很多图形都可以通过三角形拼凑得来，就以五边形为例，这里将以多个三角形来画出五边形。
 "163176071843527CSS FAQ: 다각형 그리는 방법(삼각형 ~ 육각형)")
*{ margin: 0; } #wrapper { position: relative; top: 300px; margin-left: 300px; } .main2 { transform: rotate(72deg); } .main3 { transform: rotate(144deg); } .main4 { transform: rotate(216deg); } .main5 { transform: rotate(288deg); } .tool{ width: 0px; height: 0px; border-right: 58px solid transparent; border-left: 58px solid transparent; border-bottom: 160px solid red; position: absolute; top: 0; left: 0; }
效果如下图所示：
实现五边形的主要难点在于border的三个边的取值，以及旋转的角度。
到目前为止三角行、四、五边形的三种形式都实现了一遍，他们均是通过border来实现的，那么让我们来想一下怎么画出一个六边形，有条件的可以在纸上画画，我们可以把一个五边形分成6个等边三角形，让我们通过上面所学知识来实现一下六边形吧！
 "163176072498206CSS FAQ: 다각형 그리는 방법(삼각형 ~ 육각형)")
*{ margin: 0; } #wrapper { position: relative; top: 300px; margin-left: 300px; } .main2 { transform: rotate(60deg); } .main3 { transform: rotate(120deg); } .main4 { transform: rotate(180deg); } .main5 { transform: rotate(240deg); } .main6 { transform: rotate(300deg); } .tool{ width: 0px; height: 0px; border-right: calc(60px / 1.732) solid transparent; border-left: calc(60px / 1.732) solid transparent; border-bottom: 60px solid red; transform-origin: top; position: absolute; top: 0; left: 0; }
通过上面的方法实现五边形，这边难点主要是画出等边三角形。
上面的方法已经实现了，让我们想想其他的方法实现一下吧，这里我们将通过三个四边形实现五边形，让我们一下实验一下吧！！
 "163176073058661CSS FAQ: 다각형 그리는 방법(삼각형 ~ 육각형)")
*{ margin: 0; } #wrapper { position: relative; top: 300px; margin-left: 300px; } .main1 { width: calc(120px / 1.732); height: 120px; background-color: black; } .main2 { width: calc(120px / 1.732); height: 120px; transform: rotate(120deg); background-color: black; } .main3 { width: calc(120px / 1.732); height: 120px; transform: rotate(240deg); background-color: black; } .tool{ position: absolute; top: 0; left: 0; }
好了，目前已经讲述了三角形，四边形，五边形，六边形得到实现方式了，更高的实现方式就以此类推了。
原文地址：https://juejin.cn/post/7001772184498601991
作者：执鸢者
更多编程相关知识，请访问：编程入门！！
위 내용은 CSS FAQ: 다각형 그리는 방법(삼각형 ~ 육각형)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
