CSS를 사용하여 모서리가 완전히 구부러진 육각형을 어떻게 만들 수 있나요?

CSS를 사용하여 모서리가 구부러진 육각형 만들기

CSS를 사용하여 모서리가 구부러진 육각형을 만들려면 다음 전략을 사용할 수 있습니다.

원본 CSS 및 문제

제공하신 CSS는 네 면에 곡선 모서리가 있는 육각형을 만들고 상단과 하단 가장자리는 직선으로 유지합니다.

#hexagon-circle {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
    border-radius: 10px;
}
#hexagon-circle:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 29px solid red;
    border-radius: 10px;
}
#hexagon-circle:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 29px solid red;
    border-radius: 10px;
}

해결책: CSS 변환 사용

육각형의 위쪽 및 아래쪽 가장자리를 곡선으로 만들려면 CSS 변환을 사용하여 전체 육각형을 60도 회전할 수 있습니다. 도. 육각형과 유사 요소 모두에 이 회전을 적용하면 부드럽고 구부러진 육각형의 환상을 만들 수 있습니다.

.hex {
  position: relative;
  margin: 1em auto;
  width: 10em;
  height: 17.32em;
  border-radius: 1em/.5em;
  background: orange;
  transition: opacity .5s;
}

.hex:before,
.hex:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}

.hex:before {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.hex:after {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

이러한 조정을 통해 6개 모두 곡선 모서리가 있는 육각형 모양을 만들 수 있습니다. 측면. border-radius 속성은 곡선 모서리를 생성하는 반면 CSS 변환은 완전히 곡선 육각형의 환상을 제공합니다.

위 내용은 CSS를 사용하여 모서리가 완전히 구부러진 육각형을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!