How Can I Create a Hexagon with Fully Curved Edges Using CSS?

Creating Curved-Edged Hexagons with CSS

To create a curved-edge hexagon using CSS, you can employ the following strategies:

Original CSS and Issue

The CSS you provided creates a hexagon with curved edges on four sides, leaving the top and bottom edges straight.

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

Solution: Using CSS Transformations

To curve the top and bottom edges of the hexagon, you can use CSS transformations to rotate the entire hexagon by 60 degrees. By applying this rotation to both the hexagon and its pseudo-elements, you create the illusion of a smooth, curved hexagon.

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

By making these adjustments, you create a hexagonal shape with curved edges on all six sides. The border-radius property creates the curved corners, while the CSS transformations provide the illusion of a fully curved hexagon.

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