CSSのみで要素を六角形にする方法CSSのみで六角形を実装する方法 上記のような六角形を実装します。 まず、HTMLは以下のように記述します。今回はdivにしていますが、リンク等でもOKです。 .hexagon { width: 88px; height: 50px; background: #aaa; position: relative; } .hexagon_cont { height: 100%; font-size: 16px; font-weight: bold; color: #fff; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; } .hexagon::before, .hexagon::after { content: ""; width: 100%; height
