완전히 곡선된 가장자리를 가진 CSS 육각형을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

완전히 곡선된 가장자리를 가진 CSS 육각형을 만드는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-12-02 01:44:15

원래의

930명이 탐색했습니다.

How to Create a CSS Hexagon with Fully Curved Edges?

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를 사용하여 다음:

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

로그인 후 복사

HTML: