CSS를 사용하여 단일 div의 일반 다각형 변환을 수행하는 방법

이 문서에서는 순전히 CSS를 사용하여 "단일" div를 정삼각형에서 정팔각형으로 변환하고(단일 div는 최대 정팔각형만 될 수 있음) 마지막으로 애니메이션 효과를 사용하여 정다각형 변환 애니메이션으로 변환합니다. 또한 정다각형은 삼각함수 계산이 많이 필요하므로 편의상 정다각형의 변을 100px로 설정하였습니다.

Ixagonal Triangle

정삼각형은 의사 요소를 사용할 필요가 없으며 p 자체의 테두리 너비만 설정하면 됩니다. 먼저 정삼각형의 변 길이와 중심선을 살펴보겠습니다. 측면 길이가 100px이면 중심선은 87px(100 x sin(60) = 87)로 반올림됩니다.

그래서 p의 길이와 너비를 0으로 설정한 다음 아래쪽 테두리의 너비를 87px로 설정하고 왼쪽 및 오른쪽 테두리의 너비를 50px로 설정해야 합니다(색상은 설정됨) 투명하게) 멋진 삼각형을 만들 수 있습니다.

width:0;
height:0;
border-width:0 50px 87px ;
border-style:solid;
border-color:transparent transparent #095;

Square

정사각형이 가장 단순해야 합니다. 길이와 너비를 동일한 값으로 설정하면 됩니다. 그러나 실제로는 길이와 너비를 설정할 수 있는 방법이 두 가지 더 있습니다. 0입니다. 상하좌우 테두리를 50px로 설정할 수도 있습니다. 두 번째 옵션은 높이를 0으로, 너비를 100px로 설정한 다음 특정 변의 너비를 100으로 설정하는 것입니다. 괜찮아.

.a{
width:100px;
height:100px;
background:#c00;
}
.b{
width:0;
height:0;
border-width:50px;
border-style:solid;
border-color:#095;
}
.c{
width:100px;
height:0;
border-width:0 0 100px;
border-style:solid;
border-color:#069;
}

정오각형

정오각형은 먼저 기본 삼각함수 분야에 들어가야 하며, 원래의 p를 위쪽 삼각형으로 사용한 다음 의사 요소를 사용합니다. 아래 사다리꼴을 만드는 데 사용되었습니다. 정오각형의 각 변이 이루는 각도는 108도이므로 삼각함수를 사용하여 위쪽 삼각형의 높이는 59px(100 x cos(54)), 너비는 192px가 됩니다. (100x sin(54) x 2), 아래쪽 사다리꼴의 높이는 95px(100 x sin(72))이고, 긴 변의 너비는 위쪽 삼각형과 동일한 192px입니다.

원리를 이해한 후 의사 요소를 사용하여 일치시키고 만들 수 있습니다!

.a{
      position:relative;
  width:0;
  height:0;
  border-width:0 81px 59px;
      border-style:solid;
  border-color:transparent transparent #069;
}
.a:before{
  position:absolute;
  content:"";
  top:59px;
  left:-81px;
  width:100px;
  height:0;
  background:none;
  border-width:95px 31px 0;
  border-style:solid;    
  border-color:#069 transparent transparent;
    }

정육각형

정육각형의 각 각도는 120도입니다. 순수 CSS의 관점에서 보면 정오각형에 삼각형을 바꿔서 만들 수 있습니다. 사다리꼴의 긴 변은 200px(100 x cos(60) x 2 + 100)이고, 사다리꼴의 높이는 87px(100 x sin(60))입니다.

그러니 정오각형의 CSS를 살짝 수정하여 정육각형을 만들어 보세요.

.a{
      position:relative;
    width:100px;
    height:0;
    border-width:0 50px 87px;
      border-style:solid;
    border-color:transparent transparent #f80;
}
.a:before{
  position:absolute;
  content:"";
    top:87px;
    left:-50px;
    width:100px;
    height:0;
  background:none;
    border-width:87px 50px 0;
  border-style:solid;    
    border-color:#f80 transparent transparent;
    }

정칠각형

다음 의사 요소는 정칠각형의 시작 부분부터 사용해야 합니다. 왜냐하면 정칠각형은 원래의 p를 위쪽 블록으로 사용하여 3개의 메모리 블록으로 분해해야 하기 때문입니다. 삼각형의 경우, 하나의 의사 요소가 중간 사다리꼴로 사용되고, 또 다른 의사 요소가 하단 사다리꼴로 사용됩니다. 정칠각형의 각도는 정수가 아니라 소수점 둘째 자리인 128도와 4/7도입니다. 아마도 128.57이 아닐까 싶습니다. 그래서 계산 결과는 아래 그림과 같습니다. 핵심은 길이와 너비가 무엇인지 명확히 알아야 한다는 것입니다.

길이와 너비가 결정되면 CSS로 작성을 시작하세요!

.a{
      position:relative;
    width:0;
    height:0;
    border-width:0 90px 43px;
      border-style:solid;
    border-color:transparent transparent #09c;
}
.a:before{
  position:absolute;
  content:"";
    top:140px;
    left:-112px;
    width:100px;
    height:0;
    border-width:78px 62px 0;
  border-style:solid;    
    border-color:#09c transparent transparent;
    }
  .a:after{
    position:absolute;
    content:"";
    top:43px;
    left:-112px;
    width:180px;
    height:0;
    border-width:0 22px 97px;
    background:none;
    border-style:solid;
    border-color:transparent transparent #09c;
  }

정팔각형

정팔각형은 실제로 정팔각형 위에 있는 삼각형을 사다리꼴로 바꾸고, 가운데 사다리꼴을 직사각형으로 바꾸는 것입니다. 135도에서 계산된 각 영역의 길이와 너비는 다음과 같습니다.

같은 원리로 CSS를 사용하는 것이 훨씬 간단합니다!

.a{
      position:relative;
    width:100px;
      height:0;
      border-width:0 71px 71px;
      border-style:solid;
    border-color:transparent transparent  #f69;
}
.a:before{
  position:absolute;
  content:"";
    top:171px;
      left:-71px;
      width:100px;
      height:0;
      border-width:71px 71px 0;
  border-style:solid;    
      border-color: #f69 transparent transparent;
    }
  .a:after{
      position:absolute;
      content:"";
      top:71px;
      left:-71px;
      width:242px;
      height:0;
      border-width:0 0 100px;
      background:none;
      border-style:solid;
      border-color:transparent transparent #f69;
  }

小结

以上就是纯粹利用CSS做出来的单一div的正多边形变换，如果熟练的话，其实加上动画效果，就可以做出像下面示例这个样子的变换动画啰！

相关教程：css视频教程

위 내용은 CSS를 사용하여 단일 div의 일반 다각형 변환을 수행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!