Home >Web Front-end >CSS Tutorial >How to Create a Fully Curved Hexagon with CSS?

How to Create a Fully Curved Hexagon with CSS?

Susan Sarandon
Susan SarandonOriginal
2024-12-04 07:55:12373browse

How to Create a Fully Curved Hexagon with CSS?

How to Create a Uniformly Curved Hexagon Using CSS

Your provided CSS effectively curves the four edges of a hexagon, leaving the top and bottom straight. If you desire a fully curved hexagon, the following modifications can be made:

In the CSS code, change the following:

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

And add the following:

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

This new code generates a hexagon shape with smoothly curved edges on all sides, including the top and bottom.

The above is the detailed content of How to Create a Fully Curved Hexagon with CSS?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn