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, 함께했던 버전입니다 (어떤 이유로 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/