在曲线中显示html列表

Question

如何用曲线而不是在行块中显示列表，用html和css？

为了便于回答这个问题，我已经准备好了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

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