DIVSを互いに重ね合わせます。 CSSだけを使ってイメージに現れるものを行うことは可能ですか？

Question

これは私が達成しようとしているものです。 CSSのみを使用することも可能ですし、画像を使用する必要がありますか？

感謝。

Answer 1

sdleihssirhcの答えは素晴らしいです：

ここ

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

私は相対的な位置を使用し、それを配置することです他のdivの中心をコンテナの外側に移動します。

注：これはcss3の丸みのあるコーナーを使用しているため、css3をサポートしていないブラウザでは四角いコーナーが表示されます。ここで

Answer 2

"position：relative"を使用し、要素を "上、右、左または下"を使用して移動できますか？コードを投稿できますか？ <legend>との国境半径を使用しています

Answer 3

Here's a simple proof of concept：

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 
} 

あなたがしようとしているブラウザいるに応じて、サポート、答えis

はい、CSSだけで可能です。

...またはそれをちょうど<div>要素に保ちようとしていましたか？あなたはdiv要素にそれを維持したい場合は、フィールドセットを使用したい、このjsfiddleで遊んでいる場合

Answer 4

は、それが私の感想です：

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; 
} 

編集：くそー、常に私のものと遅すぎます。ああ、今から選ぶたくさんのオプション。