Как сделать кликабельный список, где элементы повернуты на 45 градусов

Question

Я ищу сделать первую страницу с набором интерактивных областей, которые являются прямоугольниками, повернутыми на 45 градусов.Представьте себе набор книг, которые частично упали (на 45 градусов), и что их шипы - это все ссылки на то, что написано на обороте книги.

Пока что у меня есть.

.somediv{
    height:300px;
    width:300px;
}

ul{
    height: 100%;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}

li{
    transform: rotate(315deg);
    display: block;
    width: 10vw;
}

a{
    display:inline-block;
    height:14.14vw;
    width: 145vh;
    background-color:red;
}

<div class="somediv">
<ul>
  <li><a href="">One</a></li>
  <li><a href="">Two</a></li>
  <li><a href="">Three</a></li>
</ul>
<div>

Пока это довольно хорошо.Но ссылки очень маленькие.Я подумал, что смогу просто увеличить их высоту и ширину, и это решит проблему (я думаю, что нет, потому что они встроены).В этот момент я попытался использовать display: box, но затем, если они не имеют идеального размера, они увеличивают окно, и это вызывает больше проблем, чем решает.Спасибо за ваше время.

Answer 1

Здесь много чего происходит, но лучше всего использовать writing=mode, чтобы текст работал сверху вниз, а затем вращался по своему желанию.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::before,
::after {
  box-sizing: inherit;
}
.somediv {
  height: 100px;
  width: 300px;
  border: 1px solid grey;
  margin:1em auto
}

ul {
  height: 100%;
  display: flex;
  flex-direction: row;
  list-style: none;
  justify-content: flex-end;
  align-items: flex-end;
}

li {
  transform-origin: bottom right;
  transform: rotate(15deg); /* or your chosen angle */
  border: 1px solid grey;
  background-color: red;
  margin:0;
}

a {
  writing-mode: vertical-lr;
  transform:rotate(180deg); /* as right to left isn't supported yet */
}

<div class="somediv">
<ul>
  <li><a href="">One</a></li>
  <li><a href="">Two</a></li>
  <li><a href="">Three</a></li>
</ul>
<div>