Question

我有一个项目列表，其中包含背景图像（通过CSS）和一些文本。简单的标记如下：

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    etc...
</ul>

想象一下，每个列表项都是正方形。有没有一种简单的方法可以将它们显示为半圆？即。

   [][]
 []    []
[]      []

现在为了使这个稍微复杂一点，有一个变量 - 列表项的数量是未知的，所以我需要动态地解决这个问题。我可以很容易地计算出每个列表项的宽度，这样它在x-xis上看起来是正确的，我只是遇到了y轴问题。

感激不尽的任何帮助。

感谢您的时间嗅探器

Answer 1

你的拱门被划分为item_count-1个切片，整个圆圈是2Pi弧度，你只使用半圆（1Pi）。将总数（1Pi）除以切片数（item_count），并将其乘以拱的高度。

在Javascript中：

for(var i=0; i<item_count; i++){
  var angle=Math.PI/(item_count - 1),
      y=(1-Math.sin(angle * i))*arch_height;
  //set the items CSS 'top' property to y
}

创建列表项的拱门（javascript）

1 个答案: