To make an octagon in CSS first we need to set up a div. We are going to give our div an id of octagon.
[code]<div id="octagon"></div>[/code]
Next we will insert the style for the octagon in our css stylesheet.
[code]<style>
#octagon {
width: 100px;
height: 100px;
background: gray;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid gray;
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 gray;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
</style>[/code]
To see more about creating octagons please see CSS tricks.
A1WEBSITEPRO Social Media Pages
Here are my social media pages, lets hook up!