CSS
단일 요소 모양

광장

사각형을 만들려면 너비와 높이가 모두있는 요소를 정의합니다. 아래 예제에서 우리는 width 와 height 가 각각 100 픽셀 인 요소를 가지고 있습니다.

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background: rgb(246, 156, 85);
}

삼각형

CSS 삼각형을 만들려면 폭과 높이가 0 픽셀 인 요소를 정의하십시오. 삼각형 모양은 테두리 속성을 사용하여 형성됩니다. 높이와 너비가 0 인 요소의 경우 4 개의 테두리 (위쪽, 오른쪽, 아래쪽, 왼쪽)는 각각 삼각형을 형성합니다. 높이 / 너비가 0이고 테두리가 4 가지 인 요소가 있습니다.

일부 테두리를 투명하게 설정하고 다른 테두리를 색상으로 설정하여 다양한 삼각형을 만들 수 있습니다. 예를 들어 위쪽 삼각형에서 아래쪽 테두리를 원하는 색으로 설정 한 다음 왼쪽 및 오른쪽 테두리를 투명하게 설정합니다. 왼쪽과 오른쪽 테두리가 약간 빗금이되어 삼각형이 어떻게 형성되는지 보여주는 이미지가 있습니다.

삼각형의 크기는 높이, 길이, 편면 등 다른 테두리 폭을 변경하여 변경할 수 있습니다. 아래의 예는 모두 50x50 픽셀 삼각형을 보여줍니다.

삼각형 - 포인팅 업

<div class="triangle-up"></div>

.triangle-up {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid rgb(246, 156, 85);
}

삼각형 - 포인팅 다운

<div class="triangle-down"></div>

.triangle-down {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid rgb(246, 156, 85);
}

삼각형 - 오른쪽 가리개

<div class="triangle-right"></div>

.triangle-right {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 50px solid rgb(246, 156, 85);
}

삼각형 - 왼쪽을 가리키며

<div class="triangle-left"></div>

.triangle-left {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 50px solid rgb(246, 156, 85);
}

삼각형 - 포인팅 업 / 라이트

<div class="triangle-up-right"></div>

.triangle-up-right {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 156, 85);
  border-left: 50px solid transparent;
}

삼각형 - 포인팅 위쪽 / 왼쪽

<div class="triangle-up-left"></div>

.triangle-up-left {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 156, 85);
  border-right: 50px solid transparent;
}

삼각형 - 포인팅 다운 / 오른쪽

<div class="triangle-down-right"></div>

.triangle-down-right {
  width: 0;
  height: 0;
  border-bottom: 50px solid rgb(246, 156, 85);
  border-left: 50px solid transparent;
}

삼각형 - 포인팅 다운 / 왼쪽

<div class="triangle-down-left"></div>

.triangle-down-left {
  width: 0;
  height: 0;
  border-bottom: 50px solid rgb(246, 156, 85);
  border-right: 50px solid transparent;
}

버스트

버스트 (burst)는 별과 비슷하지만 몸체와의 거리가 멀어지는 점이 있습니다. 버스트 모양을 추가로 약간 회전 된 사각형이있는 사각형으로 생각하십시오.

추가 제곱은 ::before 및 ::after psuedo-elements를 사용하여 만듭니다.

8 포인트 버스트

8 포인트 버스트는 2 개의 레이어가있는 사각형입니다. 아래쪽 사각형은 요소 자체이며 추가 앞모습은 :before 의사 요소를 사용하여 만듭니다. 하단은 20 ° 회전되고, 상단 사각형은 135 ° 회전됩니다.

<div class="burst-8"></div>

.burst-8 {
  background: rgb(246, 156, 85);
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -ms-transform: rotate(20deg);
  transform: rotate(20eg);
}

.burst-8::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: rgb(246, 156, 85);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

12 포인트 버스트

12 포인트 버스트는 3 개의 레이어가 정사각형입니다. 아래쪽 사각형은 요소 자체이며 추가 squares는 :before 및 :after 의사 요소를 사용하여 만듭니다. 하단은 0 ° 회전하고, 다음 사각형은 30 ° 회전하고 상단은 60 ° 회전합니다.

<div class="burst-12"></div>

.burst-12 {
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  background: rgb(246, 156, 85);
}

.burst-12::before, .burst-12::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: rgb(246, 156, 85);
}

.burst-12::before {
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.burst-12::after {
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

원과 타원

원

원 을 만들려면 width 과 height 가 동일한 요소 ( 사각형 )를 정의한 다음이 요소의 border-radius 속성을 50% 합니다.

HTML

<div class="circle"></div>

CSS

.circle {
   width: 50px;
   height: 50px;
   background: rgb(246, 156, 85);
   border-radius: 50%;
}

타원

타원 은 원과 비슷하지만 width 와 height 대한 값이 다릅니다.

HTML

<div class="oval"></div>

CSS

.oval {
  width: 50px;
  height: 80px;
  background: rgb(246, 156, 85);
  border-radius: 50%;
}

사다리꼴의

사다리꼴은 높이가 0px (높이가 0px ) 인 블록 요소와 0보다 큰 폭 및 한면을 제외하고는 투명 한 테두리로 만들 수 있습니다.

HTML :

<div class="trapezoid"></div>

CSS :

.trapezoid {
    width: 50px;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid black;
}

경계면을 변경하면 사다리꼴의 방향을 조정할 수 있습니다.

입방체

이 예제에서는 의사 요소에 대해 2D 변형 방법 skewX() 및 skewY() 를 사용하여 큐브를 만드는 방법을 보여줍니다.

HTML :

<div class="cube"></div>

CSS :

.cube {
  background: #dc2e2e;
  width: 100px;
  height: 100px;
  position: relative;
  margin: 50px;
}

.cube::before {
  content: '';
  display: inline-block;
  background: #f15757;
  width: 100px;
  height: 20px;
  transform: skewX(-40deg);
  position: absolute;
  top: -20px;
  left: 8px;
}

.cube::after {
  content: '';
  display: inline-block;
  background: #9e1515;
  width: 16px;
  height: 100px;
  transform: skewY(-50deg);
  position: absolute;
  top: -10px;
  left: 100%;
}

데모보기

피라미드

이 예제에서는 가상 요소에서 테두리 및 2D 변형 방법 skewY() 및 rotate() 를 사용하여 피라미드 를 만드는 방법을 보여줍니다.

HTML :

<div class="pyramid"></div>

CSS :

.pyramid {
  width: 100px;
  height: 200px;
  position: relative;
  margin: 50px;
}

.pyramid::before,.pyramid::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: 50px solid;
  position: absolute;
}

.pyramid::before {
  border-color: transparent transparent #ff5656 transparent;
  transform: scaleY(2) skewY(-40deg) rotate(45deg);
}

.pyramid::after {
  border-color: transparent transparent #d64444 transparent;
  transform: scaleY(2) skewY(40deg) rotate(-45deg);
}