このようなものを作りたいのですが、<div></div>
でwidth
を%
で指定しているものに対して行いたいのです。
.
画像を使って、中に別のdiv
を入れて、z-index
を付ければできます。
しかし、CSSを使ってバックグラウドにこのような円を作ることができるのかどうかを知りたいのです。
これは、border-radius
プロパティを使用して行うことができます。基本的には、円を得るためには、border-radiusを高さと幅のちょうど半分に設定する必要があります。
[JSFiddle][1].
HTML
<div id="container">
<div id="inner">
</div>
</div>
CSS
#container
{
height:400px;
width:400px;
border:1px black solid;
}
#inner
{
height:200px;
width:200px;
background:black;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left:25%;
margin-top:25%;
}