DIVS друг на друга Можно ли сделать то, что появляется на изображении, используя только CSS?

Question

Это то, чего я пытаюсь достичь. Возможно использование только CSS или необходимо использовать изображения?

Спасибо.

Answer 1

Вот мое мнение:

http://jsfiddle.net/U69Fv/

<fieldset class="content">
    <legend class="title">Lorem Ipsum</legend> 
</fieldset>

.title{
    margin:0 auto -1.25em;
    padding:.25em;
    width:25%;
    text-align:center;
    background-color:#fff;
    color:#000;
    border: 5px solid #ffce96;
    border-radius:8px; 
}

.content{
    margin:0 1em;
    padding:4em;
    background-color:#efdefe;
    border: 5px solid #ffce96;
    border-radius:8px;
}

Редактировать: Черт, всегда слишком медленно с моими вещами.Ну что ж, сейчас есть из чего выбрать.

Answer 2

Ответ sdleihssirhc хорош, если вы хотите использовать набор полей, если вы хотите оставить его в divs, поиграйте с этим jsfiddle:

http://jsfiddle.net/qT3Hz/1/

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

Примечание: здесь используются закругленные углы css3, поэтому браузеры без поддержки css3 будут видеть квадратные углы.

Answer 3

Вот простое доказательство концепции , которая использует border-radius с <legend>:

HTML:

<fieldset>
    <legend>hello, world</legend>
</fieldset>

CSS:

fieldset {
    background:#eee;
    border:3px solid #ffd099;
    border-radius:10px;
    height:3em
}

legend {
    background:white;
    font:.75em/1.75 "Trebuchet MS", Helvetica, sans-serif;
    border:3px solid #ffd099;
    border-radius:5px;
    width:10em;
    text-align:center
}

В зависимости от того, какие браузеры вы пытаетесь поддерживать, ответ будет

Да, это возможно только с помощью CSS.

... или вы пытались сохранить его только для <div> элементов?

Answer 4

Вы можете использовать «position: родственник» и перемещать элемент, используя «top, right, left или bottom». Вы можете опубликовать код?