How to Create a Fully Curved Hexagon with CSS?-CSS Tutorial-php.cn

How to Create a Fully Curved Hexagon with CSS?

Susan Sarandon

Release： 2024-12-04 07:55:12

Original

376 people have browsed it

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: '';
}

Copy after login

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

Copy after login

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!