Создать отзывчивую форму груши с помощью CSS или реагировать Изображения

Для проекта мне нужно создать грушевидный контейнер. Я попытался сделать это, используя скругленные углы CSS3, но он просто не похож на него. Затем я использовал изображение внизу, но мне нужно, чтобы это было отзывчивым (масштабируемое изображение).Создать отзывчивую форму груши с помощью CSS или реагировать Изображения

Я хочу, чтобы закодировать что-то вроде: http://tinypic.com/view.php?pic=98fxid&s=5

Но, как вы уменьшаете экран браузера, разрывы макета и форма груши не является масштабируемым. Я хотел бы знать, есть ли способ сделать это, используя CSS3 ИЛИ лучший способ сделать это с помощью масштабируемых изображений.

Кстати, я использую бутстрап, и это моя первая попытка сделать сайт с использованием бутстрапа, поэтому любое руководство будет высоко оценено.

источник

2013-09-03 Alex Zahir

Я думаю, вы можете использовать фоновое изображение SVG для всей криволинейной области (а не только подсказку, как показано на рисунке) с шириной фона 100% (или одной из опций фона). Поскольку это векторная графика, она будет масштабироваться плавно, а размер файла будет небольшим. –

В какой-то момент вы сможете использовать модуль css forms, и могут быть некоторые браузеры, которые уже поддерживают его. В то же время вы можете посмотреть SVG или холст в качестве опции.

источник

2013-09-03 20:31:47

Это довольно слабый ответ. У вас есть пример того, как это сделать с любым из вариантов, которые вы упомянули? – cimmanon

с модулем css-фигур, поскольку он не полностью определен на данный момент, его, вероятно, нужно будет сделать, используя два divs и shape-outside (см. Http://dev.w3.org/csswg/css-shapes/ для пример). Для SVG вы должны создать изображение SVG в иллюстраторе или какой-либо другой векторной программе и использовать его. фокус в основном заключается в компоновке содержимого. С модулем css forms, который по большей части заботится. –

Вы можете создать форму груши, используя два пересекающихся сегмента круга, один для левой и один для правой стороны. Сегменты круга создаются путем ограничения круга на его родительский контейнер через overflow: hidden;. Чтобы упростить разметку, вы можете создать элементы детского круга с помощью псевдоэлементов :before и/или :after.

HTML:

<div class="content-form"> 
    <div class="pear-shape left"></div> 
    <div class="pear-shape right"></div> 
</div>

CSS:

.content-form { 
    width: 75%; 
    max-width: 325px; 
    height: 200px; 
    background: url(http://www.domainandseo.com/bootstrap/img/design.png); 
    position: relative; 
} 
.pear-shape { 
    overflow: hidden; 
    width: 50%; 
    height: 200px; 
    position: relative; 
    top: 100%; 
} 
.left { float: left; } 
.right { float: right; } 
.pear-shape.left:before { 
    position: absolute; 
    left: 0; 
    top: 0; 
    content: ''; 
    width: 200%; 
    height: 100%; 
    border-radius: 0 0 0 250px; 
    background: url(http://www.domainandseo.com/bootstrap/img/design.png); 
} 
.pear-shape.right:before { 
    position: absolute; 
    top: 0; 
    right: 0; 
    content: ''; 
    width: 200%; 
    height: 100%; 
    border-radius: 0 0 250px 0; 
    background: url(http://www.domainandseo.com/bootstrap/img/design.png); 
}

Заканчивать этот пример Fiddle.

источник

2013-09-03 23:00:48 BigMacAttack

Создать отзывчивую форму груши с помощью CSS или реагировать Изображения

ответ

Смежные вопросы