如何将元素旋转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>