.octagon { position: relative; } .octagon:before, .octagon:after { display: block; content: ""; position: absolute; left: 0; right: 0; border: 20px solid transparent; } .octagon:before { bottom: 100%; border-bottom-color: inherit; } .octagon:after { top: 100%; border-top-color: inherit; } .octagon-color { background-color: #DDAAAA; border-color: #DDAAAA; } ポイントと注意点は、 :beforeと:afterの擬似要素をpositionで配