How to make an octagonal div?

Question

Pretty simple idea, but I'm not sure how to do this. I would like to be able to style it as a single div (if possible).

How to create an octagon div ?

Answer 1

CSS used in this link :

 #octagon { width: 100px; height: 100px; background: red; position: relative; } #octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } #octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } 

It is built from the div itself, which is given a rectangular shape. Using the :before and :after pseudo-classes, the content is added to create two trapezoids that fill the octagon. Skillfully this keeps the actual tag counter only one, using more fun CSS bits.

The origins of this technique can be found here .

---

Here is a small demonstration . The blue part is :before CSS and green :after CSS. And even better, here is a demo version that allows you to use transparent backgrounds! (thanks @GGG).

Answer 2

How easy is it to make a square, rotate it 45 degrees, and then fix the corners?

 .octagon { height: 10em; position: relative; overflow: hidden; width: 10em; } .octagon:after { background: red; content: " "; height: 100%; position: absolute; width: 100%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } 

jsFiddle

Answer 3

You can also get an octagonal div with inline svg using the polygon element .
Here is an example:

 svg{width:30%;} 

 <svg viewbox="0 0 10 10"> <polygon points="3 0, 7 0, 10 3, 10 7, 7 10, 3 10, 0 7, 0 3" /> </svg>