Menu rond en HTML5 et CSS3 seuls. Dysfonctionnel. Lais n'étant pas un front-end, j'aime bien mon résultat. Rendre générique, simplifier et en faire une mini api ?

menuRond.html

<!--MENU ROND POUR 6 ITEMS-->
<!-- C'ETAIT TRES COMPLIQUE ALORS NE PAS EMBETER LE CODE (sinon il explose) ET NON CE N'EST PAS UN DEFI -->
<style>
.circle {

    /* POUR AGRANDIR */
    transform: translate(-50%, -50%) scale(1.0); 
    transform: translate(-50%, -50%) scale(1.0); 
    /* NE | RIEN MODIFIER | APRES */
  }
  .circle {
    padding: 0;
    width: 600px;
    height: 600px;
    border-radius: 100%;
    display: block; /* blocks h and v centering goes as follows */
    position: relative;
    left: 50%;
    top: 50%;
  }
  .circle line {
    display: flex;
    position: relative;
    justify-content: space-between;
  }
  .circle * { 
    border-collapse: collapse 
  }
  .circle .topp { 
    margin: 0 18% 
  }
  .circle .midd { 
    margin: 5% 0 
  }
  .circle .bttm { 
    margin: 0 18% 
  }
  .circle .vignette {
    display: flex;
    position: relative;
    border-radius: 100%;
    width: 150px;
    height: 150px;
    justify-content: center;
    align-items: center;
    outline: none;
    border: none;
    text-decoration: none;
    text-align: center;
    overflow-x: hidden;
    text-overflow: ellipsis;
    padding: 6px;
  }
  .circle .vignette {

  /* NE | RIEN MODIFIER | AVANT */
    background-color: #00000044;
    color: #ffffffff;
    font-family: serif; 
    font-weight: bold;
    text-transform: lowercase;
    box-shadow: 0 1px 6px #000000dd;
    filter: drop-shadow(0 6px 6px #000000dd);
  }
  .circle .vignette:hover {
    box-shadow: 0 1px 6px #000000dd;
    filter: drop-shadow(0 6px 6px #000000aa);
    transform: scale(1.2);

  }
</style>
<nav class="circle"> 
  <line class="topp">
    <a href="#" class="vignette" id="item1"></a><!--
--><a href="#" class="vignette" id="item2"></a>
  </line>
  <line class="midd">
    <a href="#" class="vignette" id="item3"></a><!--
--><a href="#" class="vignette" id="item4"></a>
  </line>
  <line class="bttm">
    <a href="#" class="vignette" id="item5"></a><!--
--><a href="#" class="vignette" id="item6"></a>
  </line>
</nav>
<!--/MENU ROND-->