How to arrange clickable links in a circle using HTML?-CodePudding

May I know how to arrange the clickable links of a website into a circle? I imagined the website to be like this.

Those words in white are the clickable links. How do we pull it off to reproduce the result?

Thank you all!

CodePudding user response：

You can use chained CSS transforms like in this example.

It then works this way:

 @for $i from 1 through $item-count {
      &:nth-of-type(#{$i}) {
        transform: 
          rotate($rot * 1deg) 
          translate($circle-size / 2) 
          rotate($rot * -1deg);
      }

CodePudding user response：

You can use css to do this.

element {
     position:absolute;
     top:100px;
     left:100px;
}

top is your y value, and left is your x value

CodePudding user response：

I think I knew how after seeing the answers from our intrepid comrades. Although I have 65% satisfaction of those answers, it will serve me well.

The HTML code to arrange the clickable links in a circle is:

<!DOCTYPE html>
<html>
<head>
<style>

.container {
  --d: 6.5em; /* image size */
  --rel: 1; /* how much extra space we want between images, 1 = one image size */
  --r: calc(.5*(1   var(--rel))*var(--d)/var(--tan)); /* circle radius */
  --s: calc(2*var(--r)   var(--d)); /* container size */
  position: relative;
  width: var(--s); height: var(--s);
  background: silver /* to show images perfectly fit in container */
}

.container a {
  position: absolute;
  top: 50%; left: 50%;
  margin: calc(-.5*var(--d));
  width: var(--d); height: var(--d);
  --az: calc(var(--i)*1turn/var(--m));
  transform: 
    rotate(var(--az)) 
    translate(var(--r))
    rotate(calc(-1*var(--az)))
}


</style>
</head>
<body>


<div  style="--m: 8; --tan: 0.41">
  <a style="--i: 1"; href="https://www.w3schools.com">
    Wacky Ideas
  </a>
  <a style="--i: 2"; href="https://www.w3schools.com">
    Galleries
  </a>
  <a style="--i: 3"; href="https://www.w3schools.com">
    Blogs
  </a>
  <a style="--i: 4"; href="https://www.w3schools.com">
    The Future
  </a>
  <a style="--i: 5"; href="https://www.w3schools.com">
    My Adventures
  </a>
  <a style="--i: 6"; href="https://www.w3schools.com">
    Homepage
  </a>
  <a style="--i: 7"; href="https://www.w3schools.com">
    Know Thomas
  </a>
  <a style="--i: 8"; href="https://www.w3schools.com">
    Play with Thomas
  </a>
</div>

</body>
</html>

Giving you the output like this:

Clickable links arranged in a circle