Кнопка / вкладка выглядят одинаково независимо от ширины

Question

Я пытаюсь создать кнопку, которая бы выглядела одинаково (на заднем плане) независимо от ее ширины (чем длиннее текст внутри, тем шире кнопка).

Для изображения кнопки я бы использовал изображение шириной в 1 пиксель:

- он имеет 5 пикселей черного цвета сверху, а затем 35 пикселей красного цвета. И я использую эту CSS, чтобы повторить фон:

background-image:url('../images/button.png');
background-repeat: repeat-x;

Теперь это будет выглядеть так:

Но я хочу использовать эти два изображения в качестве левой и правой стороны кнопки: Так что хотелось бы, чтобы кнопка изогнута в верхних углах, и она будет выглядеть как настоящая кнопка. Это вообще возможно?

Итак, вопрос в том, как я могу использовать 3 изображения в качестве фона для div или любой другой вещи, чтобы она выглядела как одна целая кнопка, а средняя часть повторяется столько раз, сколько нужно, чтобы Заполните. Желаемый вид:

PS. Я нарисовал это в MSPaint секунду назад, так что не обращайте внимания на качество изгиба или цвета, я просто хотел, чтобы оно было видимым.

Answer 1

Если вы хотите использовать самые современные функции CSS3, вы можете указать более одного background-image с помощью CSS, но это не будет работать со старыми браузерами, такими как IE.

Вы также можете использовать ::before и ::after псевдоэлементы, но это, вероятно, снова не сработает в IE.

Тогда вы можете использовать изображения и перемещать их вправо и влево.

Вы можете видеть каждыйметод здесь: http://jsfiddle.net/xawQ8/

Answer 2

Вы пытались погуглить это, прежде чем отправлять?Есть много сайтов и примеров того, как это сделать.Попробуйте поискать "css tabs with закругленными углами" и посмотрите, что вы получите ...

Вот 2 ссылки для начала, но в будущем попробуйте выполнить простой поиск в Google, прежде чем отправлять вопрос.

Пример кода из http://www.sitepoint.com/accessible-menu-tabs/

<ul id="navigation">
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="page1.html"><span>Page 1</span></a></li>
</ul>

#navigation a { color: #000; background: #fb0 url("left-tab.gif") left top no-repeat; text-decoration: none; padding-left: 10px }
#navigation a span { background: url("right-tab.gif") right top no-repeat; padding-right: 10px }
#navigation a, #navigation a span { display: block; float: left } 
#navigation a:hover { color: #fff; background: #26a url("left-tab-hover.gif") left top no-repeat; text-decoration: none; padding-left: 10px }
#navigation a:hover span { background: url("right-tab-hover.gif") right top no-repeat; padding-right: 10px }
#navigation { list-style: none; padding: 0; margin: 0 }
#navigation li { float: left; display: block; margin: 0; padding: 0 }

Или репозиторий других учебных пособий и т. Д .: http://www.bitrepository.com/rounded-corners-tab-menus.html

Вы обязательно найдете там что-нибудь, что будет работать для вас ....

Answer 3

Или просто добавьте левую и правую сторону кнопки к содержимому кнопки.

Примерно так:

http://jsfiddle.net/rVaPc/ (грязный и быстрый код)