6
A
回答
4
我不知道任何优雅的解决方案的不幸,尤其是当它涉及到的菜单项,而电弧本身应该是纯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;
}
现在面临的挑战将是所有的菜单项和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/
相关问题
- 1. CSS3下拉菜单样式
- 2. 我想用CSS3制作一条曲线
- 3. CSS3如何制作曲折边框?
- 4. CSS中的曲线菜单
- 5. HTML/CSS3 - 曲线
- 6. 如何制作这样的菜单?
- 7. 如何用ggplot2绘制样条曲线?
- 8. 如何在菜单中的项目周围创建“绘制”样式线
- 9. 如何样式菜单?
- 10. 如何在Android中制作这样的顶层菜单/子菜单系统?
- 11. 如何在WP中制作这样的水平下拉菜单
- 12. 如何在android中制作这样的下拉菜单?
- 13. 在css中绘制曲线三角形菜单
- 14. 如何为菜单和内容制作“一个”css3阴影?
- 15. 如何使用CSS3制作手风琴菜单?
- 16. 如何使用css3制作吸引人的下拉菜单?
- 17. 如何制作jquery弹出式菜单
- 18. 如何制作“下拉式”菜单?
- 19. 下拉菜单css3菜单在IE10中不工作
- 20. 如何在Android中制作菜单
- 21. 在Gnuplot中绘制不同点样式的曲线
- 22. 了解菜单在html5和css3中的工作方式
- 23. 如何在OpenLayers中制作双色虚线样式?
- 24. 如何在Windows窗体中制作虚线边框样式?
- 25. 如何制作曲线形状的JSlider?
- 26. 如何制作图形/曲线?
- 27. 如何制作雪花曲线?
- 28. 如何使用UIBezierPath制作曲线?
- 29. 如何在Qt中绘制曲线?
- 30. 如何在Matlab中绘制曲线
看一看这个线程http://stackoverflow.com/questions/2840862/is-there-a-way-to-curve-arc-text-using-css3-canvas – 2013-03-21 12:57:34
是的,你可以做一个弯曲的菜单 - 检查我的答案问题:http://stackoverflow.com/questions/13132864/circular-tooltip/ – Ana 2013-03-21 13:43:40
@Ana这是非常棒的! – xec 2013-03-21 13:54:17