You're here: Home » CSS » CSS Octagon Shape

CSS Octagon Shape

On Dec 2, 2011 under CSS

With CSS3 it’s possible to construct octagon shape and I have posted the code below. I am trying out new shapes in CSS every now and then and it’s coming out really well.

Octagon

Demo

CSS

.octagon-shape {
    width: 100px;
    height: 100px;
    background: #cd1d63;
    margin: 10px 0 0 40px;
}
.octagon-shape:before {
    content: "";
    position: absolute;
    border-bottom: 30px solid #cd1d63;
    border-left: 30px solid #fff;
    border-right: 30px solid #fff;
    width: 40px;
    height: 0;
}
.octagon-shape:after {
    content: "";
    position: absolute;
    border-top: 30px solid #cd1d63;
    border-left: 30px solid #fff;
    border-right: 30px solid #fff;
    width: 40px;
    margin: 70px 0 0 0;
    height: 0;
}