CSS를 사용하여 단일 div의 일반 다각형 변환을 수행하는 방법-CSS 튜토리얼-php.cn

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

little bottle

풀어 주다： 2019-04-29 10:17:51

앞으로

3087명이 탐색했습니다.

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

Ixagonal Triangle

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

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

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

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

로그인 후 복사

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

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

로그인 후 복사

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

정오각형

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

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

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

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

로그인 후 복사

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

정육각형

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

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

그러니 정오각형의 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;
    }

로그인 후 복사

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

정칠각형

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

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

길이와 너비가 결정되면 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;
  }

로그인 후 복사

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

정팔각형

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

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

같은 원리로 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;
  }

로그인 후 복사

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