Código HTML y CSS para hacer un octógono WEB

html
CopiarEditar
<div class="octogono">
  <a href="enlace1.html" class="circulo"></a>
  <a href="enlace2.html" class="circulo"></a>
  <a href="enlace3.html" class="circulo"></a>
  <a href="enlace4.html" class="circulo"></a>
  <a href="enlace5.html" class="circulo"></a>
  <a href="enlace6.html" class="circulo"></a>
  <a href="enlace7.html" class="circulo"></a>
  <a href="enlace8.html" class="circulo"></a>
</div>

css
CopiarEditar
/* Estilo para el contenedor del octógono */
.octogono {
  position: relative;
  width: 200px;
  height: 200px;
  background: #f0f0f0;
  clip-path: polygon(
    30% 0%, 70% 0%,
    100% 30%, 100% 70%,
    70% 100%, 30% 100%,
    0% 70%, 0% 30%
  );
  margin: 50px auto;
}

/* Estilo para los círculos */
.circulo {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #3498db;
  border-radius: 50%;
  display: block;
}

/* Posicionamiento de los círculos en los vértices */
.circulo:nth-child(1) { top: -15px; left: 30%; }
.circulo:nth-child(2) { top: -15px; left: 70%; }
.circulo:nth-child(3) { top: 30%; right: -15px; }
.circulo:nth-child(4) { top: 70%; right: -15px; }
.circulo:nth-child(5) { bottom: -15px; left: 70%; }
.circulo:nth-child(6) { bottom: -15px; left: 30%; }
.circulo:nth-child(7) { top: 70%; left: -15px; }
.circulo:nth-child(8) { top: 30%; left: -15px; }