html - 如何将元素旋转 45 度的可点击列表

Question

我想制作一个包含一组可点击区域的首页，这些区域是旋转 45 度的矩形。想象一组部分翻倒(45 度 Angular )的书，每本书的书脊都链接到书背面所写的任何内容。

到目前为止我已经。

.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>