How Can I Create a Hexagon with Fully Curved Edges Using CSS?-CSS Tutorial-php.cn

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

Barbara Streisand

Release： 2024-12-07 22:50:13

Original

418 people have browsed it

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

Copy after login

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

Copy after login

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!