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를 사용할 수 있습니다. 추가됨:

.curved-hexagon {
  position: relative;
  width: 100px;
  height: 55px;
  background: red;
  border-radius: 10px 10px 0 0 / 10px 10px 29px 29px;
}

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

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

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

수정된 CSS:

• border-radius 속성이 업데이트되어 위쪽 및 아래쪽 가장자리에 곡선을 지정합니다.
• 의사 요소의 변환 속성은 더 이상 필요하지 않으므로 제거됩니다.

이렇게 하면 육각형이 생성됩니다. 상단 및 하단 가장자리를 포함하여 모든 가장자리가 곡선입니다.

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