CSS를 사용하여 곡선 위쪽 및 아래쪽 가장자리가 있는 육각형을 어떻게 만들 수 있습니까?

곡선 위쪽 및 아래쪽 가장자리로 육각형 강화

CSS를 사용하여 완전히 구부러진 육각형을 만드는 문제를 해결하려면 코드를 자세히 살펴보고 수정 방법을 이해해 보겠습니다. 원하는 효과를 얻으려면:

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

이 코드에서 중요한 변경 사항은 테두리 반경을 수정하는 것입니다. 재산. 원래 육각형의 너비와 높이 모두에 1em의 원형 반경이 적용되었습니다. 이를 1em / 0.5em으로 변경하면 효과적으로 타원형 테두리 반경을 생성할 수 있습니다. 이렇게 늘어난 반경은 위쪽과 아래쪽 가장자리의 곡률을 허용하는 동시에 반원의 너비는 일정하게 유지됩니다.

설명:

이 조정에서는 원과 타원을 고려하십시오. 원은 모든 방향에서 균일한 반경을 갖는 반면, 타원은 축에 따라 반경이 다릅니다. 테두리 반경을 '1em / 0.5em'으로 지정하여 수평 반경이 1em(육각형 너비)이고 수직 반경이 0.5em(육각형 높이의 절반)인 타원을 정의합니다. 그 결과 육각형의 상단과 하단에 곡선 가장자리가 생깁니다.

기타 CSS:

추가 CSS 요소는 두 개의 의사 요소, :before 및 :를 생성합니다. 그 후에는 절대적으로 육각형 내부에 위치합니다. 육각형의 너비, 높이, 테두리 반경 및 배경을 상속하여 반대 방향으로 60도 회전된 두 개의 겹치는 육각형을 만듭니다. 이러한 회전된 육각형은 모든 가장자리를 따라 부드럽고 연속적인 곡선의 환상을 만듭니다.

이러한 변경 사항을 구현하면 가장자리가 완전히 구부러진 육각형을 얻을 수 있어 시각적으로 더욱 매력적이고 심미적으로 보기 좋은 모양을 얻을 수 있습니다.

위 내용은 CSS를 사용하여 곡선 위쪽 및 아래쪽 가장자리가 있는 육각형을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!