如何制作元素旋转45°的可点击列表？适配仿倾斜书脊链接场景

嘿，我完全懂你想要实现的效果——那种像倾斜倒下的书籍，书脊作为可点击链接，但点击区域太小确实影响体验。咱们来一步步修复这个问题：

问题根源分析 #

你之前的代码里，把rotate(315deg)加在了li上，但a元素的宽高设置混用了vw和vh，而且没考虑变换后元素的实际点击区域范围。另外，display:inline-block虽然能设置宽高，但配合变换时需要更精准的尺寸控制。

修复后的代码实现 #

这里我调整了布局逻辑，让点击区域完全覆盖视觉上的倾斜书脊，同时避免撑大窗口：

HTML（仅修正闭合标签，结构保持不变）

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

CSS（核心调整）

.somediv {
  height: 300px;
  width: 100%; /* 改为100%适配容器，避免固定300px的限制 */
  overflow: hidden; /* 防止变换后的元素溢出容器撑大窗口 */
}

ul {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; /* 用align-items替代align-content，垂直居中更准确 */
  gap: 2vw; /* 给书脊之间添加间距，避免重叠 */
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  width: 10vw; /* 书脊的视觉宽度 */
  height: 100%;
  display: flex;
  align-items: center;
}

a {
  display: block;
  width: 100%;
  height: 14.14vw; /* 10vw / cos(45°) ≈14.14vw，刚好覆盖倾斜后的书脊高度 */
  background-color: red;
  transform: rotate(-45deg); /* 用-45deg更直观，和315deg效果一致 */
  transform-origin: center center; /* 确保变换中心在元素中点 */
  cursor: pointer;
  /* 可选：隐藏文字，倾斜后文字可读性差，书脊一般用纯色或图标 */
  text-indent: -9999px;
  overflow: hidden;
}

关键调整点说明 #

• 变换层级优化：把旋转效果从li移到a元素上，让点击区域直接跟随变换后的形状，避免li的容器限制。
• 尺寸精准计算：利用三角函数计算变换后的元素尺寸，14.14vw是10vw除以cos(45°)的结果，确保点击区域完全覆盖视觉上的倾斜书脊。
• 容器溢出控制：给.somediv添加overflow:hidden，防止变换后的元素超出容器范围。
• 布局细节优化：用align-items:center实现垂直居中，添加gap避免书脊之间重叠。

如果想要更大的点击区域，只需要按height = width / 0.707的比例调整li的width和a的height，就能按比例放大点击区域啦！

内容的提问来源于stack exchange，提问作者NYoung