如何将元素旋转45度的可点击列表
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将元素旋转45度的可点击列表相关的知识，希望对你有一定的参考价值。
我正在寻找一个带有一组可点击区域的首页，这些区域是旋转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，但是如果它们的尺寸不合适，它们会使窗口变大，导致问题比解决的更多。感谢您的时间。
答案
这里有很多内容，但你最好的选择是使用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>以上是关于如何将元素旋转45度的可点击列表的主要内容，如果未能解决你的问题，请参考以下文章