如何在css3中制作曲线样式菜单？ [英] How to make curve style menu in css3?

问题描述

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

我可以在HTML5中实现这个使用画布或其他东西吗？

预先感谢Logan

解决方案

遗憾的是，我不知道任何优雅的解决方案，特别是在菜单项目方面，但弧本身应该是可行的在普通的css和一些html元素中。

也许这可以让你开始。

html

 < div class =container> 
< div class =grey>< / div> 
< div class =white>< / div> 
< / div> 
  

css

  .container {
 height：200px; 
溢出：隐藏; 
职位：亲属; 
} 
 .gray，
 .white {
 position：absolute;还剩
：-25％; 
右：-25％; 
 border-radius：100％; 
} 
 .gray {/ *使用带边框半径的灰色边框来模拟弧* / 
 top：-50％; 
 border：100px纯灰色; 
 border-top：none; 
 height：200px; 
} 
 .white {/ *在横幅的顶部边缘放置一个白色椭圆形* / 
 top：-80％; 
背景颜色：白色; 
 height：300px; 
} 
  

http://jsfiddle.net/rNLsr/

现在的挑战是将所有菜单项和相应地旋转它们 ...
我并不认为这是一个可行的解决方案，但我无论如何，希望你发现它很有用。

SVG 允许您曲线文本，并且可能是更好的工具适用于此任务。

编辑

这是我用SVG做的一个版本，概念和需要调整看起来很好（由于某些原因，在Chrome中渲染可怕而在IE中很小），但它给你基本的想法：

svg

 < svg viewBox =0 0 500 300version =1.1&g吨; 
< defs> 
<！ - 从（10,40）结束（490,40）开始使用控制点（250,85） - > 
< path id =curvetextd =M 10,40 Q 250,85 490,40/> 
< / defs> 
< use x =0y =0xlink：href =＃curvetextfill =nonestroke =graystroke-width =50/> 
< text font-size =12fill =white> 
< textPath xlink：href =＃curvetext> 
< a xlink：href =http://example.com>菜单1< / a> Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 Menu 7 Menu 8 Menu 9 
  
< / text> 
< / svg> 
  

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

Is it possible to make curve/arc style menu with css3?

Can I achieve this use canvas or something in HTML5?

Thanks in advance, Logan

解决方案

I don't know of any elegant solution unfortunately, particularly when it comes to the menu items, but the arc itself should be doable in plain css and a couple of html elements.

Maybe this can get you started.

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/

The challenge now would be to position all the menu items and rotate them accordingly... I don't really see this as a feasible solution, but I'm posting anyway in hope that you might find it useful.

SVG allows you to curve text and is probably a tool better suited for this task.

EDIT

Here is a version i did with SVG, which is a proof-of-concept and needs tweaking to look good (renders horrible in chrome and tiny in IE for some reason), but it gives you the basic idea:

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 demo at: http://jsfiddle.net/rNLsr/2/

这篇关于如何在css3中制作曲线样式菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！