Радиус рамки CSS div вокруг изображения

Question

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

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

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

После помощи Пит.

Проблема здесь является

box-shadow 

Также необходимо Transparant позже на стадии коробки. Это мой результат прямо сейчас http://jsfiddle.net/peteng/cu59r/.

Редактировать: Спасибо за ответы и поддержку, которые помогут мне решить эту проблему css.

Следующая вещь, это должно случиться:

1. Смотрите картину.
2. См. Ссылку jsfiddle, которую я разместил.
3. Контент с границей требует теней коробок, радиуса границы и градиента.
4. Это должно быть динамическим.

И снова благодарю вас за то, что помогло мне, значит, для меня много.

Answer 1

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

HTML

<div id="wrapper"> 
    <div id="imageHolder"><div class="inner"><img src="http://lorempixel.com/200/200" /></div></div> 
    <!--put text here--> 
    <p>Text</p> 
</div> 

CSS

#wrapper {width:400px; border-radius:10px; border-top-right-radius:0px; background-color:#7ab37a; overflow:auto; padding:15px;} 
#imageHolder {float:right; margin:-15px -15px 0 0; background:#ffffff url(http://i.imgur.com/gMIy72D.gif) left top no-repeat;} 
#imageHolder .inner {background:url(http://i.imgur.com/RLBbLYV.gif) right bottom no-repeat; padding:10px 10px 20px 20px;} 

Example

Update

Со всеми внесенными изменениями, как к тому, что вы теперь хотите (вместо простого L-формы в оригинальном вопросе). Это невозможно по следующей причине:

Текст должен иметь цвет фона, что означает, что вам нужен цвет фона на главной обертке, чтобы он сделал l-образную форму. Это означает, что единственный способ получить желаемый эффект закругленных углов для изображения - разместить другой фон поверх фона обертки (это означает, что вы не можете иметь ничего прозрачного, иначе будет отображаться только фоновый цвет обложки)

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

Answer 2

Я думаю, что нет простого способа создать текстовое поле, подобное этому.

Мое предложение: разрабатывает коробку с Photoshop, а затем добавляет ее в качестве фонового изображения в двух разных div (текстовое поле должно иметь прозрачный фон, на котором должно быть изображение). После этого вы поместите divs в правильном направлении, при необходимости с помощью div-оболочки.

Недостатки: не реагирующие, статические, и так далее

Answer 3

Вы можете просто плавать изображения, и это будет выглядеть следующим образом: http://www.homeandlearn.co.uk/wd/images/chapter3/text_wrap_final.gif

Просто добавьте

float: right/left; 
margin: 0; 

Смотрите, если это работает.

Answer 4

см. Это DEMO. Это то, чего вы ожидаете.

<figure style="float:right;"> 

Answer 5

Это очень хороший вопрос на мой взгляд :)

Мой короткий ответ будет - да, это возможно - см. Pete's answer. Я понимаю сложность ситуации, а также понимаю, что такого решения не хватает гибкости, потому что он сочетает в себе css border-radius и изображение - so => ​​a) он будет выглядеть странным в IE8 и ниже, и b) он будет выглядеть странным, если мы меняем некоторые css :)

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

Рассмотрим глядя на эту скрипку - http://jsfiddle.net/skip405/m6cpb/1/

Я предпочел бы мой вариант, потому что это немного более гибкие - если есть необходимость изменения - только CSS изменится, нет необходимости повторного внесения каких-либо изображений другого цвета или другого радиуса ... никаких изображений вообще не нужно :) Хотя вам нужно будет стилизовать изображения, перемещаемые влево по-разному, а также - в середине текста.

Answer 6

У Skull3r7 была хорошая идея с background-image. Кроме того, можно использовать два div с (динамическим) текстом и один с «верхней границей».

• Слой один содержит текст как «заполнитель» и «нижней границы»,
• слой два содержит «верхней границы изображения» (покрывает верхнюю часть слоя одного)
• Слой три содержит видимый текст ,

Example

Однако проще реализовать решение Пита, но я надеюсь, что этот пример тоже может помочь. :)

Answer 7

Еще одним альтернативным вариантом для тех, предложил, учитывая следующий HTML структуру:

<div class="imgContainer"> 
    <img src="http://placekitten.com/150/150" /> 
    <p><!-- text excised for brevity --></p> 
</div> 

И CSS:

.imgContainer { 
    border: 1px solid #000; 
    padding: 0; 
    width: 80%; 
    margin: 0 auto 1em auto; 
    border-radius: 1em; 
} 

.imgContainer img { 
    float: right; 
    margin: -1px -1px 0 0; 
    padding: 0 0 0.5em 0.5em; 
    border: 1px solid #fff; 
    border-bottom: 1px solid #000; 
    border-left: 1px solid #000; 
} 

.imgContainer p { 
    margin: 0.5em; 
    padding: 0; 
    text-indent: 0.5em; 
} 

JS Fiddle demo.

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

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