как создать вкладки с арками между ними?

Question

ниже изображение того, о чем я говорю:

Могу ли я сделать это с чистым CSS?

ОБНОВЛЕНИЕ: я создал div с закругленными углами (используя border-radius) в верхнем правом и левом углах и поместил их между вкладками. Все еще ищу более элегантное решение.

Answer 1

Лучший способ сделать это - наложить на элементы меню элемент, который имеет радиус границы. Этот элемент должен иметь тот же цвет фона, что и контейнер меню.

Эти наложения должны выполняться с помощью псевдоклассов :before и :after. У них также есть отличная поддержка браузера .

HTML:

<ul class="tabs">
    <li><a href="#">Archive</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">Store</a></li>
    <li><a href="#">Patv</a></li>
</ul>
<br style="clear:both;" /> <!-- I didn't have an other element to clear the floats with -->

* ** 1013 1014 * CSS: * ** 1015 1016 *

.tabs { /* generates the grey line on the very top */
    width: 100%;
    height: 5px;
    background: grey;
}

.tabs li {
    list-style-type: none;
    float: left;
}

.tabs li:first-child {
    margin-left: 30px; /* This is just to move the menu to the left, for demo purposes */
}

.tabs a {
    text-underline: none;
    color: black;
    line-height: 30px;
    padding: 10px 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: grey;
}

.tabs a:after, .tabs li:first-child a:before {
    content: '';
    width: 4px;
    height: 25px;
    background: white; /* This has to be the background color of the container. Change it to red to see the pseudo elements */ 
    position: absolute;
    margin-top: 5px;
    margin-left: -3px;
    border-radius: 10px;
}

.tabs a:after {
    margin-left: 18px;
}

Вот демоверсия: http://jsfiddle.net/rGubz/

Answer 2

Здесь вы можете использовать отрицательные границы радиусов

http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

Возможно, он не совместим во всех браузерах, наиболее безопасно использовать изображения для внешнего радиуса

Обновление моего ответа для использования чистого CSS без отрицательного радиуса http://jsfiddle.net/peter/QTS6N/1/

Answer 3

Вы можете попробовать его, используя «отрицательный радиус границы», в основном радиальные градиенты (возможно, не совместимы с разными браузерами, может быть, стоит просто использовать графику). Взгляните на эту статью . Удачи!

Answer 4

Да, используйте свойство border-radius. Но border-radius - это свойство CSS3.