Вставка границы радиуса в CSS?

Question

Есть ли способ сделать это изображение формы в CSS? CSS3 в порядке, нет необходимости в совместимости с IE. Градиентная часть этого не важна, это кривая внизу справа, что я не вижу, как это сделать. Я видел различные плагины jQuery, но ничего, что будет работать для меня до сих пор. Я не могу использовать фоновое изображение, так как содержание в нем будет переменной длины.

Изменить: Спасибо за ответы, очень впечатляет! Одна вещь, хотя - в самом изображении, есть синий фон И сплошная серая граница вокруг всего, включая кривую справа. Возможно, сохранить эту границу невозможно, если решение включает в себя «хаки» пограничного радиуса на дополнительных элементах, но если это можно сохранить, это будет лучше.

Answer 1

Я создал кое-что. Возможно, это лучшее решение, но, возможно, это помогает.

jsFiddle

CSS:

.bubble { 
    width: 200px; 
    height: 30px; 
} 

.bubble .content { 
    background: #00f; 
    height: 100%; 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
    margin-right: 20px; 
} 

.bubble .blue, 
.bubble .white, 
.bubble .white .innerwhite { 
    width: 10px; 
    height: 100%; 
    float: right; 
} 

.bubble .blue { 
    background: #00f; 
    border-top-right-radius: 10px; 
} 

.bubble .white { 
    background: #00f; 
} 

.bubble .white .innerwhite { 
    background: #fff; 
    border-bottom-left-radius: 10px; 
} 

HTML:

<div class="bubble"> 
    <div class="white"> 
     <div class="innerwhite"></div> 
    </div> 
    <div class="blue"></div> 
    <div class="content"></div> 
</div> 

Answer 2

Вот CSS фигуры. Вам нужно несколько фигур, чтобы выполнить то, что вы хотите.

body{background:white;} 

.Shape{margin:20px 30px;} 

.Shape1{ 
    position:relative; 
    width:200px; 
    height:65px; 
    background:blue; 
    border-radius:20px; 
    border:2px solid white; 
    z-index:2; 
    top:0px; 
    left:0px;} 

.Shape2{ 

    position:relative; 
    width:70px; 
    height:40px; 
    background:blue; 
    border-radius:12px; 
    border-bottom:2px solid white; 
    z-index:3; 
    top:-42px; 
    left:170px;} 

.Shape3{ 
    position:relative; 
    width:20px; 
    height:20px; 
    background:blue; 
    z-index:4; 
    top:-64px; 
    left:170px;} 

.Shape4{ 
    position:relative; 
    width:40px; 
    height:46px; 
    background:white; 
    top:-110px; 
    left:202px; 
    z-index:3; 
    box-shadow:inset 2px 0px 4px lightgray; 
    border-bottom-left-radius:40px;} 

.Shape5{ 
    position:relative; 
    height:1px; 
    width:218px; 
    background:transparent; 
    box-shadow:0px 0px 8px black; 
    left:18px; 
    top:-110px;} 

.Shape6{ 
    position:relative; 
    height:50px; 
    width:20px; 
    background:white; 
    top:-160px; 
    left:236px; 
    z-index:4;} 

.Shape7{ 
    position:relative; 
    height:10px; 
    width:50px; 
    background:white; 
    top:-210px; 
    left:203px; 
    z-index:4;} 

И HTML:

<div class="Shape"> 

    <div class="Shape1"></div> 
    <div class="Shape2"></div> 
    <div class="Shape3"></div> 
    <div class="Shape4"></div> 
    <div class="Shape5"></div> 
    <div class="Shape6"></div> 
    <div class="Shape7"></div> 

    </div> 

Вот JsBin для output.

Answer 3

Округлую границу нельзя выполнить с помощью стандартного CSS на одном объекте DOM, но вы можете использовать CSS для добавления дополнительных элементов.

Хитрость сделать это, чтобы использовать CSS :before и :after селекторы эффективно создать дополнительный элемент по обе стороны от основного элемента, а затем использовать соответствующий border-radius и background формировать что, чтобы соответствовать.

Это непросто, но это стало довольно распространенным трюком, чтобы использовать его для вкладок. Например, see here для хорошего учебника.

Надеюсь, что это поможет.