CSS는 다양한 기본 그래픽을 구현합니다.-CSS 튜토리얼-php.cn

삼각형

CSS를 작성할 때 배경 이미지를 사용하는 데 익숙하고 CSS 자체가 실제로 삼각형과 같은 많은 간단한 기본 모양을 구현할 수 있다는 사실을 무시합니다:

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 transparent transparent;
    width: 0px;
    height: 0px;
}

로그인 후 복사

렌더링:

css 实现各种基本图形

qijie에 완전 헷갈리는데요, 너비와 높이가 0인데 왜 삼각형이 표시될 수 있나요? 일반적인 테두리는 네 개의 직선으로 보이지만 그렇지 않습니다. 삼각형 코드를 수정하여 두 변을 예시로 보여줍니다.

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 blue transparent transparent;
    width: 50px;
    height: 50px;
}

로그인 후 복사

렌더링:

css 实现各种基本图形

갑자기 그 경계가 사실은 이등변사다리꼴이라는 걸 깨달았어요!

그럼 또 어떤 모양을 만들 수 있나요? (다음 코드는 CSS의 모양에서 따온 것입니다.)

Circle

css 实现各种基本图形

#circle {
    width: 200px;
    height: 200px;
    background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

로그인 후 복사

는 주로 border-radius 속성을 사용하여 직사각형의 모서리를 둥글게 만듭니다. 값은 길이(px) 또는 백분율일 수 있습니다. 백분율은 길이로 변환됩니다. 예를 들어 이 예에서 50%는 水平圆角半径=宽度*50%, 垂直圆角半径=高度*50%를 의미하므로 100px를 직접 쓰는 것은 동일합니다.

평행사변형

css 实现各种基本图形

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(160deg);
       -moz-transform: skew(160deg);
         -o-transform: skew(160deg);
    background: red;
}

로그인 후 복사

transform 기울기 특성을 다음과 같이 사용합니다. x축 방향으로

방향 (수평 오른쪽으로) 160° 기울임: 직사각형의 오른쪽이 시계 반대 방향으로 160° 회전했다고 생각할 수 있습니다. (90° 회전하면 네 변이 일치하여 도형이 사라집니다. 90° 이상 회전하면 °, 대칭과 유사하며 180° 이상 회전하면 원을 그리는 것과 같습니다.
y축 방향(수평 아래쪽)으로 기울어지면 시계 방향으로 회전하는 직사각형의 밑면으로 상상됩니다.

오각형

이제 난이도를 높여서 오각형을 그리는 방법을 살펴볼까요⭐️? 다섯개 별은 세 개의 이등변 삼각형으로 구성된 것으로 볼 수 있습니다.

css 实现各种基本图形

삼각형의 세 각은 각각 36°, 36°, 108°입니다. 이때 오각별을 그리는 것은 삼각형 3개를 그리는 것과 같습니다. 글 초반에 언급한 방법은 고정된 각도를 가진 이등변삼각형만 그릴 수 있습니다. border 주의 깊게 살펴보면 아래와 같이 실제로 각도를 제어할 수 있습니다.

  width: 10px;
  height:10px;
  border-right:  100px solid green;
  border-bottom: 70px  solid red;
  border-top: 20px  solid blue;
  border-left:   50px solid black;

로그인 후 복사

css 实现各种基本图形

테두리의 길이를 다르게 설정하면 테두리의 모양에 영향을 미칩니다. : 위 그림의 빨간색 삼각형은 밑변의 길이가 border-left + border-right 입니다. 고등학교 때 배운 코사인 정리를 통해 삼각형의 각도와 변의 길이, 모양을 알 수 있습니다. 삼각형을 결정할 수 있습니다. 그래서 이론상으로는 하나의 p과 세 개의 border의 길이를 조절하여 다양한 크기의 삼각형을 구현하는 것이 가능합니다. 몇 번의 연습을 거쳐도 정수값을 구하기 어렵기 때문에 이 방법으로는 정오각형을 그리는 것이 거의 불가능합니다.

원본 기사의 코드는 다음과 같습니다(원저자가 이 테두리의 너비를 어떻게 계산했는지 놀랐습니다):

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

로그인 후 복사

기타 흥미로운 그래픽

다이아몬드

css 实现各种基本图形

사다리꼴과 삼각형이 합쳐진 원

팩맨

css 实现各种基本图形

오른쪽 숨기기

대화상자

css 实现各种基本图形

삼각형, 둥근 사각형 추가

삼각형

CSS를 작성할 때 배경 이미지를 사용하는 데 익숙하고 CSS 자체가 실제로 삼각형과 같은 많은 간단한 기본 그래픽을 구현할 수 있다는 사실을 무시합니다.

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 transparent transparent;
    width: 0px;
    height: 0px;
}

로그인 후 복사

렌더링:

css 实现各种基本图形

百思不得qijie，为啥宽高为 0，却能显示一个三角形？平常的边框，看上去都是四条直线，其实不然，修改三角型代码，展示其两条边为例：

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 blue transparent transparent;
    width: 50px;
    height: 50px;
}

로그인 후 복사

效果图：

css 实现各种基本图形

恍然大悟，原来边框其实是等腰梯形！

那么还可以做其他哪些图形（以下代码摘自 the shapes of css）？

圆形

css 实现各种基本图形

#circle {
    width: 200px;
    height: 200px;
    background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

로그인 후 복사

主要利用了 border-radius 属性，将矩形圆角化。其值可以使用长度（px），也可以使用百分比。百分比会转化成长度，比如此例中，50% 表示 水平圆角半径=宽度*50%，垂直圆角半径=高度*50%所以直接写 100px 也是等价的。

平行四边形

css 实现各种基本图形

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(160deg);
       -moz-transform: skew(160deg);
         -o-transform: skew(160deg);
    background: red;
}

로그인 후 복사

利用 transform 倾斜特性如下：

向x轴方向（水平向右）倾斜 160°：可以想象为矩形的右侧边沿着逆时针方向旋转 160°（当旋转 90° 时，四条边重合，图形会消失；当旋转超过 90° 时，类似对称；当旋转超过 180° 时，便类似转圈了）
向 y 轴方向（水平向下）倾斜，可以想象为矩形底边沿着顺时针方向旋转。

五角形

是时候提高下难度了，我们来看下怎么画五角形⭐️？五角星可以看成是由三个等腰三角形组成。

css 实现各种基本图形

三角形三个角分别是 36°、36°、108°，此时画五角星等价于画三个三角形。文章开头提到的方法只能画角度固定的等腰三角形。仔细研究下 border，其实角度是可控的，如下所示：

  width: 10px;
  height:10px;
  border-right:  100px solid green;
  border-bottom: 70px  solid red;
  border-top: 20px  solid blue;
  border-left:   50px solid black;

로그인 후 복사

css 实现各种基本图形

通过给边框设置不同的长度，会影响到边框的形状：以上图红色三角形为例它的底边长为 border-left + border-right；高中学习的余弦定理得知：通过已知三角形的角度和任意一边的长度，可以确定三角形的形状。所以理论上，通过控制一个 p 三条 border 的长度，进而实现不同大小的三角形是可行。实践了一番，由于很难得到一个整数值，所以通过这种方法画正五角形几乎是无法实现的。

原文的代码如下（很惊讶原作者是如何算出来这些边框宽度的）：

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

로그인 후 복사