CSS로 완전 곡선 육각형을 만드는 방법은 무엇입니까?

CSS를 사용하여 균일한 곡선의 육각형을 만드는 방법

제공된 CSS는 위쪽과 아래쪽을 남기고 육각형의 네 모서리를 효과적으로 곡선으로 만듭니다. 똑바로. 완전한 곡선의 육각형을 원하는 경우 다음과 같이 수정할 수 있습니다.

CSS 코드에서 다음을 변경합니다.

#hexagon-circle:before,
#hexagon-circle:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}

그리고 다음을 추가합니다.

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

이 새로운 코드는 상단과 하단을 포함한 모든 측면에서 모서리가 완만하게 구부러진 육각형 모양을 생성합니다.

위 내용은 CSS로 완전 곡선 육각형을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!