Jak zrobić menu w stylu krzywej w css3?

Question

Czy można ustawić menu krzywej/łuku za pomocą css3?

mogę osiągnąć to use płótno albo coś w HTML5?

góry dzięki, Logan

Answer 1

ja nie znam żadnego eleganckie rozwiązanie niestety, szczególnie jeśli chodzi o pozycje w menu, ale sam łuk powinien być wykonalny w czystym CSS i kilka html elementy.

Może to ci pomoże.

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/

Obecnie wyzwaniem byłoby umieścić wszystkie elementy menu i rotate them accordingly ... nie wiem naprawdę postrzegają to jako możliwy do rozwiązania solut ale mimo to publikuję w nadziei, że może ci się przydać.

SVG pozwala na curve text i jest prawdopodobnie narzędziem lepiej nadającym się do tego zadania.

EDIT

Oto wersja zrobiłem z SVG, który jest proof-of-concept i wymaga szczypanie dobrze wyglądać (renderuje straszne w chromie i malutkie w IE z jakiegoś powodu), ale daje podstawowa 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> 

demo SVG w: http://jsfiddle.net/rNLsr/2/