Edit in JSFiddle

<div id="octagon"></div>

#octagon {
   width: 100px;
   height: 100px;
   background:orange;
   margin: 50px auto;
}

#octagon:before {
    width: 40px;
    height: 0;
    content:"";
    position: absolute;
    border-bottom: 30px solid orange;
    border-left: 30px solid white;
    border-right: 30px solid white;
}

#octagon:after {
    width: 40px;
    height: 0;
    content:"";
    position: absolute;
    border-top: 30px solid orange;
    border-left: 30px solid white;
    border-right: 30px solid white;
    margin: 70px 0 0 0;
}