How Can I Create a Fully Curved Hexagon Using CSS?

Curving the Edges of a Hexagon Using CSS

The provided CSS code successfully creates a hexagon with rounded edges on four sides, however, the top and bottom edges remain flat. To achieve a fully curved hexagon, adjustments are required.

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

Solution:

To curve the top and bottom edges of the hexagon, the following CSS can be added:

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

In this modified CSS:

• The border-radius property is updated to specify a curve on the top and bottom edges.
• The transform property on the pseudo-elements is removed, as it is no longer needed.

This will result in a hexagon where all edges are curved, including the top and bottom edges.

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