如何在css3中制作曲线样式菜单？

Question

是否可以用css3制作曲线/圆弧式菜单？

我能实现在HTML5这个用帆布或东西吗？

在此先感谢，洛根

Answer 1

我不知道任何优雅的解决方案的不幸，尤其是当它涉及到的菜单项，而电弧本身应该是纯CSS可行和一对夫妇的HTML元素。

也许这可以让你开始。

HTML

<div class="container"> 
    <div class="gray"></div> 
    <div class="white"></div> 
</div> 

CSS

.container { 
    height: 200px; 
    overflow: hidden; 
    position: relative; 
} 
.gray, 
.white { 
    position: absolute; 
    left: -25%; 
    right: -25%; 
    border-radius: 100%; 
} 
.gray { /* use a gray border with border radius to emulate an arc */ 
    top: -50%; 
    border:100px solid gray; 
    border-top: none; 
    height: 200px; 
} 
.white { /* put a white oval on top for the top edge of the banner */ 
    top: -80%; 
    background-color: white; 
    height: 300px; 
} 

http://jsfiddle.net/rNLsr/

现在面临的挑战将是所有的菜单项和rotate them accordingly定位...... 我不真的认为这是一个可行的解决方案离子，但我张贴无论如何希望你可能会发现它有用。

SVG允许你curve text，可能是一个更适合这项任务的工具。

编辑

这里是一个版本，我做了SVG，这是一个验证的概念，需要调整好看（在Chrome中显示可怕的，微小的，在IE出于某种原因），但它给你其基本思想：

SVG

<svg viewBox="0 0 500 300" version="1.1"> 
    <defs> 
     <!-- Start at (10,40) end at (490,40) use control point (250 ,85) --> 
     <path id="curvetext" d="M 10,40 Q 250,85 490,40" /> 
    </defs> 
    <use x="0" y="0" xlink:href="#curvetext" fill="none" stroke="gray" stroke-width="50"/> 
    <text font-size="12" fill="white"> 
     <textPath xlink:href="#curvetext"> 
      <a xlink:href="http://example.com">Menu 1</a> Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Menu 7 Menu 8 Menu 9 
     </textPath> 
    </text> 
</svg> 

SVG演示在：http://jsfiddle.net/rNLsr/2/