はどのようにCSS

Question

にこの効果を得るために、どのように私は、CSSの絵のような同様の効果を得ることができますか？私はこの効果について何かを探していたが、私は何も

Answer 1

あなたを見つけませんでした

.box { 
 
border:2px solid #000; 
 
width:100px; 
 
height:100px; 
 
text-align:center; 
 
margin:20px; 
 
} 
 
.content { 
 
background:#fff; 
 
width:70px; 
 
margin:-10px auto; 
 
}

<div class="box"> 
 
<div class="content">content</div> 
 
</div>

Answer 2

オプションが移動する相対位置を使用することですワン：負のマージンを適用することができます要素はその自然な位置を基準にしています。

.box{ 
 
height:200px; 
 
width:300px; 
 
position:absolute; 
 
left:50px; 
 
top:50px; 
 
border: 1px solid black; 
 
} 
 
.text{ 
 
background-color:white; 
 
color:black; 
 
position:relative; 
 
top:-10px; 
 
text-align:center; 
 
}

<div class="box"> 
 
<center> 
 
<span class="text"> 
 
Title 
 
</span> 
 
</center> 
 
</div>