JQuery круглый угол слияния div

Question

Кто-нибудь знает, есть ли какой-нибудь плагин, который делает закругленные углы, но делает это с несколькими элементами, создавая впечатление, что они соединены и закруглены, как показано здесь - в частности, я хочу, чтобы внутренние углы были закруглены, а также снаружиуглы.

Черный контур обозначает пределы элемента, а синий - конечный результат.

Я отредактировал изображение, чтобы оно стало понятнее.

Answer 1

Насколько я понимаю, вы хотите стилизовать первый и последний элемент в вашем выделении и сделать их округленными. Все, что находится между ними, должно быть оставлено без внимания. Правильно?

Итак, что-то вроде этого jQuery-фрагмента должно делать то, что вы хотите.

$("myDivs").first().css({
    "border-top-left-radius": "2px",
    "border-bottom-left-radius": "2px"
}.end().last().css({
    "border-top-right-radius": "2px",
    "border-bottom-right-radius": "2px"
}

Для ясности: end () возвращает к селектору $ ("myDivs") после предыдущего вызова first, позволяя выбрать последний элемент сейчас.

Answer 2

Вам нужен плагин jQuery Corner . Это говорит

Используйте top, bottom, left, right, tl, tr, bl, br, чтобы определить, какой угол стиля

Вот как бы вы сделали то, что описали:

<script type="text/javascript">
    $("#element-1").corner("left");
    $("#element-2").corner("right");
</script>

<div id="element-1" style="float:left"></div>
<div id="element-2" style="float:right"></div>

Вы можете скачать его здесь .

Answer 3

Вы можете сделать это с помощью любого плагина с закругленными углами, если вы заранее знаете, какие элементы вы хотите, чтобы закругленные углы были!используя селекторы jQuery :first-child и :last-child.Если у вас более сложная структура, вам может понадобиться отметить определенные углы как те, которые требуют округления.