A Pentagon is a 5 sided polygon or geometric shape with 5 internal angles measuring 108 degrees each. The pentagon can be drawn using simple HTML and CSS, the below sections will guide you on how to draw the desired shape.
HTML Code: In this section we will create a simple div element using the div class with class name “pentagon”.
CSS Code: In this section first we will design the div element with some basic CSS properties and the draw the pentagon, we will use CSS :after Selector which inserts something after the content of an element i.e, in our case the div element.
Final Code: It is the combination of the above two code sections.
- 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 circle with gradient border using CSS ?
- How to Draw a Curved Edge Hexagon using CSS ?
- HTML | Canvas Draw Bezier Curve
- How to draw with mouse in HTML 5 canvas ?
- How to draw Inscribed circle of a triangle using p5.js ?
- How to Draw Graphics using Canvas in HTML5 ?
- How to override the CSS properties of a class using another CSS class ?
- How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ?
- How to create X and Y axis flip animation using HTML and CSS ?
- p5.js | draw() Function
- Difference between bootstrap.css and bootstrap-theme.css
- How to create Glowing Star effect using HTML and CSS?
- Email Template using HTML and CSS
- Create a Sticky Social Media Bar using HTML and 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 firstname.lastname@example.org. 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.