CSS FAQ: 다각형 그리는 방법(삼각형 ~ 육각형)

순수한 CSS를 사용하여 다각형을 그리는 방법은 무엇입니까? 이번 글에서는 순수 CSS를 시작으로 삼각형을 그리는 방법을 소개하고, 사각형, 오각형, 육각형을 그리는 방법도 비유적으로 그려볼 수 있으니 많은 분들께 도움이 되었으면 좋겠습니다!

오늘은 인터뷰에서 자주 테스트되는 CSS 질문을 CSS를 사용해 다각형을 그리는 방법으로 공부해보겠습니다. 이번에는 삼각형, 사각형, 오각형, 육각형을 예로 들어 시작하기 전에 몇 가지 필요한 지식을 이해해야 합니다.

1. 기본 지식 보유

이번에는 이러한 도형을 그리기 위해 순수한 CSS 지식을 사용하여 먼저 필요한 기본 CSS 지식 포인트인 CSS 상자 모델을 배웁니다. [관련 추천: "css 영상 튜토리얼"]

위 그림에서 볼 수 있듯이 표준 박스 모델은 content, padding, border, margin으로 구성되어 있습니다. 코드를 사용하는 특정 상황.

<!--HTML部分，此部分代码若是不变，后面将复用不在赘述-->
<div id="main"></div>

/*css部分*/ 
#main { 
  width: 100px;
  height: 100px;
  border: 200px solid red; 
}

렌더링은 다음과 같습니다.

2. 실전 전투

말로만 하고 연습하지 않고 이제 기본 CSS 속성을 사용하여 일반적인 삼각형, 사각형, 오각형을 그려 보겠습니다...

2.1 사변형

background-color 속성을 사용하여 사각형을 직접 그릴 수 없는 경우 위 그림을 보면 내용의 너비와 높이를 0으로 설정하고 테두리의 너비와 높이를 설정하면 다음과 같은 결과를 얻을 수 있음을 알 수 있습니다. 사각형은 테두리로 구성됩니다. 사각형은 정사각형, 평행사변형, 직사각형 등으로 구분됩니다. 여기서는 테두리를 사용하여 위의 세 가지 모양을 구현해 보겠습니다.

2.1.1 정사각형

먼저 가장 간단한 정사각형을 구현해 보겠습니다.

#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.2 Rectangle

2.1.1에서는 이미 테두리를 사용하여 사각형을 구현했으므로 다음에는 배운 내용을 바탕으로 사각형을 구현해 보겠습니다. 지식을 바탕으로 길이 ≠ 너비가 되도록 정사각형의 길이와 너비만 조정하면 됩니다.

#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;
}

효과는 아래 그림과 같습니다.

2.1.3 평행사변형

PS: 평행사변형을 구현하려면 두 개의 삼각형을 사용해야 하므로 여기서는 건너뛰는 것이 좋습니다. 2.2 먼저 삼각형 구현을 본 다음 다시 돌아가서 여기에서 평행사변형 방법을 살펴보세요.

여기에서는 2.2의 내용을 모두 읽었다고 가정합니다. 다음으로 평행사변형을 구현해 보세요.

<div id="wrapper">
	<div class="public"></div>
	<div class="public move"></div>
</div>

*{
   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;
}

효과는 아래 사진과 같습니다.

2.2 삼각형

지금까지 가장 간단한 사각형이 완성되었으니 이때 벌써 느낌이 오시나요? 계속해서, 테두리는 사각형을 구현할 수 있으므로 삼각형은 문제가 되지 않습니다. 물론 각도에 따라 예각삼각형, 직각삼각형, 둔각삼각형으로 나눌 수 있습니다. 일회.

2.2.1 예각삼각형

먼저 콘텐츠의 너비와 높이가 모두 0일 때 테두리의 왼쪽, 오른쪽, 위쪽, 아래쪽이 차지하는 상황을 살펴보겠습니다.

#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;
}

렌더링은 다음과 같습니다.

그림에서 볼 수 있듯이 왼쪽, 오른쪽, 위쪽, 아래쪽이 모두 삼각형을 차지하므로 특정 삼각형이 필요할 때 다른 삼각형만 숨기면 됩니다. 세 개의 삼각형 그게 다입니다. 투명 속성 값을 사용하여 테두리를 숨길 수 있으므로 구현해 보겠습니다.

#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;
}

효과는 그림과 같습니다.

2.2.2 직각삼각형

이제 위 그림을 바탕으로 예각삼각형을 그릴 수 있습니다. 두 개의 테두리 면을 보여주세요. 코드를 사용해 보겠습니다

#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;
}

효과는 그림과 같습니다.

2.2.3 둔각 삼각형

위 그림은 이전 아이디어의 타당성을 확인합니다. 그럼 둔각삼각형을 어떻게 구현하는지 생각해 볼까요? 이전의 생각은 불가능하기 때문에 생각을 바꿔야 합니다.

我们可以用两个直角三角形，将小的直角三角形覆盖在大的上面，让我们试一下吧！！

<div id="main1"></div>
<div id="main2"></div>

#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;
}

效果图如下所示：

这次通过绝对定位来控制小的直角三角形，那么我们可以通过控制黑色三角形的颜色来显示钝角三角形。

2.3 五边形

三角形都已经学会了，那么很多图形都可以通过三角形拼凑得来，就以五边形为例，这里将以多个三角形来画出五边形。

<div id="wrapper">
    <div class="main1 tool"></div>
    <div class="main2 tool"></div>
    <div class="main3 tool"></div>
    <div class="main4 tool"></div>
    <div class="main5 tool"></div>
</div>

*{
    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的三个边的取值，以及旋转的角度。

2.4 六边形

到目前为止三角行、四、五边形的三种形式都实现了一遍，他们均是通过border来实现的，那么让我们来想一下怎么画出一个六边形，有条件的可以在纸上画画，我们可以把一个五边形分成6个等边三角形，让我们通过上面所学知识来实现一下六边形吧！

<div id="wrapper">
  <div class="main1 tool"></div>
  <div class="main2 tool"></div>
  <div class="main3 tool"></div>
  <div class="main4 tool"></div>
  <div class="main5 tool"></div>
  <div class="main6 tool"></div>
</div>

*{
  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;
}

通过上面的方法实现五边形，这边难点主要是画出等边三角形。

上面的方法已经实现了，让我们想想其他的方法实现一下吧，这里我们将通过三个四边形实现五边形，让我们一下实验一下吧！！

<div id="wrapper">
  <div class="main1 tool"></div>
  <div class="main2 tool"></div>
  <div class="main3 tool"></div>
</div>

*{
    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!