CSS邊界半徑方向

css
css3

2013-01-09 144 views 3 likes

我有一個請求，以使這些菜單項：CSS邊界半徑方向

頂部菜單：
enter image description here

側面菜單：
enter image description here

我開始用一個border-radius，但我不知道如何讓另一邊成爲'外半徑'，我相信頂部和底部的菜單都是基本相同的想法，我只需要玩一下尺寸和方向。

我很快就會分享我正在使用的版本的jsFiddle，目前我還沒有設法做任何事情。

來源

2013-01-09 Shimmy

像這樣的事情？ http://csstube.ajmlab.com/tutorials/css-snippets/making-outer-border-radius-css？或http://www.cssplay.co.uk/menu/css3-radius-tabs.html？ – sachleen

@sachleen男人這是1：1的答案。請作爲答覆發佈，我會在可用時標記它。 – Shimmy

回答

實質上，您希望使用:before和:after選擇器在所需角落創建一個帶邊框半徑的小框。

有很多在線的例子，這裏有幾個：

Making Outer Border Radius Using CSS and CSS3
CSS3 - Tabs with inner and outer radii - no graphics - （免費供個人使用 - 不是商業）
Flared Borders with CSS

來源

2013-01-09 01:59:48 sachleen

相關問題

1. 邊界半徑CSS
2. CSS邊界半徑
3. CSS邊界半徑
4. css中的「向外」邊界半徑？
5. 邊界半徑在IE9反向CSS
6. IE9邊界半徑CSS
7. 邊界半徑問題CSS
8. 反向邊界半徑
9. CSS邊框RADIUS，這是使用正確的樣式？邊界半徑？ -webkit-邊界半徑？ -moz-邊界半徑？
10. CSS邊界半徑和-webkit-邊界半徑不工作在iOS 5的UIWebView