html - 在曲线中显示 html 列表

Question

如何使用 html 和 css 以曲线而不是线 block 显示列表？

为了方便回答这个问题，我准备了一个codepen

CodePen Link

非常感谢。

Answer 1

使用

transform: rotate(-30deg);

在第一个列表项上。随后使用更高的度数，以

结尾

transform: rotate(30deg);

如果您需要适用于任意数量元素的动态解决方案，您可以使用 Javascript/jQuery 函数轻松地自动执行此操作:

$(document).ready(function() {
  var numberOfItems = $('#movies ul li').length;
  var startAngle=-30;
  var maxOffset = 60;
  if (numberOfItems > 1) {
    var step = 60/(numberOfItems-1);
    $('#movies ul').css('margin-top', maxOffset+'px')
    $('#movies ul li').each(function(index) {
      var deg = startAngle + index * step;
        var offset = -1 * (maxOffset - 2 * Math.abs(deg));
      $(this).css({
        'top': offset+'px',
        'transform': 'rotate('+deg+'deg)'
      });
    });
  }
});

http://codepen.io/anon/pen/YXGBdg

编辑:现在包含一个可变偏移量，具体取决于列表中的位置，以形成“曲线”外观。