We can make a curved edge hexagon by using the pseudo-element property of CSS.
- Use a div element to create a rectangle and also add border-radius to it.
- Now create a pseudo-element after using CSS and rotate it by using 60deg.
- Also create another pseudo-element before by using CSS and rotate it by -60deg.
Example 1: This example draws a curve edge hexagon using CSS.
Example 2: How to draw a curved edge hexagon using CSS with some effect.
- How to draw a circle with gradient border using CSS ?
- How to Draw a Half Moon using HTML and CSS?
- How to Draw a Semi-Circle using HTML and CSS ?
- How to Draw a Trapezium using HTML and CSS ?
- How to Draw a Pentagon using HTML and CSS?
- How to draw Inscribed circle of a triangle using p5.js ?
- How to Draw Graphics using Canvas in HTML5 ?
- Nodejs | GM edge() Function
- How to override the CSS properties of a class using another CSS class ?
- HTML | Canvas Draw Bezier Curve
- p5.js | draw() Function
- How to draw with mouse in HTML 5 canvas ?
- Difference between bootstrap.css and bootstrap-theme.css
- Making a div vertically scrollable using CSS
- How to hide an element when printing a web page using CSS?
- Parallax scrolling effect using CSS.
- HTML | Responsive full page image using CSS
- How to create Glowing Star effect using HTML and CSS?
- Displaying XML Using CSS
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.