How to make a curved edge hexagon by using CSS

by

I think you are looking for this.

css

.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);
   -ms-transform: rotate(60deg);/*Added for IE9*/
   transform: rotate(60deg);
}
.hex:after {
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);/*Added for IE9*/
  transform: rotate(-60deg);
}

fiddle

More Related Contents:

  1. How to make double border on left only with thick outside and thin inside [duplicate]
  2. Cut Corners using CSS
  3. Transparent half circle cut out of a div
  4. Can I create a div with a Curved bottom?
  5. How to create a circle with links on border side
  6. How to make this arrow in CSS only?
  7. Shape with a slanted side (responsive)
  8. CSS Cut out circle from a rectangular shape
  9. CSS3 Transform Skew One Side
  10. How to draw circle in html page?
  11. Responsive CSS Trapezoid Shape
  12. Generate repeating hexagonal pattern with CSS3
  13. How to create a curve between two gradient using CSS?
  14. Hexagon shape with a border/outline
  15. How to create a transparent triangle with border using CSS?
  16. How to bevel the corner of a block div?
  17. Dynamically aligning pseudo element according to parent height
  18. CSS Speech Bubble with Box Shadow
  19. Center Triangle at Bottom of Div
  20. CSS box shadow around a custom shape?
  21. How can I make a 45 degree responsive ribbon with folded corner?
  22. Border with a transparent centred arrow
  23. Add outward curving border to elements like this: ◝◟___◞◜
  24. Skewed Borders on a Div
  25. Pixelated edge around a CSS Circle with overflow: hidden;
  26. Title with bottom border smaller than width
  27. div with triangle at the bottom with background image
  28. How to create a triangle in CSS3 using border-radius
  29. How to create a heart shape using CSS?
  30. Make plus symbol in CSS

Leave a Comment