0
직장에서 나는 리본 UI와 유사한 간단한 메뉴 UI를 만드는 작업이 주어졌습니다. 그것은 정교하거나 멋져 보이지 않아도되지만, 어떻게 해야할지 모르는 구체적인 모습을 가질 필요가 있습니다.Office 리본 탭에서와 같이 바깥 쪽을 향하게 곡선 된 하단 모서리 CSS
사무실에서와 마찬가지로 바깥 쪽을 향하고 선택한 탭의 아래쪽을 둥글게 만들 필요가 있습니다. 모든 최신 브라우저에서 지원되는 CSS3 (경계 왼쪽 상단 반경 : 4px 및 오른쪽)를 사용하여 선택한 탭의 상단을 쉽게 만들 수있었습니다 (이전 브라우저에서는 둥근 모서리가 필요하지 않습니다.) 그들이 원하는 경우 쉽게 업그레이드 할 수 있습니다 :)). 그러나 선택한 탭에서 테두리 왼쪽 아래 반경 : 4px를 사용하면 바깥 쪽을 향하지 않고 안쪽을 향한 정상적인 둥근 아래쪽 모서리를 갖습니다 (나쁜 영어로 유감스럽게 생각합니다).
CSS3를 사용하여 어떻게 든 구현할 수 있습니까? 이것은 조금 날조되어 http://jsfiddle.net/U84ng/
하고 배경 대신 단색의 이미지 인 경우 더 복잡한 가져옵니다이 당신이 원하는 것보다
이것은 정확히 내가 의미했던 것과 같습니다. 나는 그 트릭이 뭔지 모르겠다. :) 무엇이 탭 루의 바닥을 그렇게 구부러지게 했습니까? 고맙습니다. –
트릭은 탭 자체의 색상으로 탭의 왼쪽과 오른쪽에 공간을 두는 것입니다.이 경우 배경과 동일한 요소 (또는 의사 요소)를 배치하는 것보다 div.tab에서 왼쪽과 오른쪽으로 경계선을 지정하십시오 테두리 바운더리가있는 한 모서리를 제외한이 공간을 모두 덮을 것입니다.이 경우 div.tab_left와 div.tab_right입니다. 희망이 도움이됩니다. – Litek
알겠습니다. 고마워 Litek! –