3

循環 div のオーバーフローを隠そうとしています。その子 div は、コンテナー領域の外側では非表示になります (良い) が、半径領域の外側のみでは表示されたままになります (悪い)。

.outer{
    position:relative;
    border-radius: 50%;               
    width: 200px;
    height: 200px;
    background:#dedede;
    overflow: hidden;
}
.inner{
    position: absolute;
    top:150px;
    left:150px;
    width: 50px;
    height: 50px;
    background-color: red;
    background:#98de45;
}​

全体として、 http://buildinternet.com/project/mosaic/1.0で効果を達成したいのですが、円を使用しています - これを行う方法はありますか?

フィドル: http://jsfiddle.net/a9Feu/

編集: これは Firefox と IE 10 では正常に動作しますが、Chrome や Safari では動作しません

4

2 に答える 2

5

このような？

.outer{
    position:static;
    border-radius: 50%;               
    width: 200px;
    height: 200px;
    background:#dedede;
    overflow: hidden;
}
.inner{
    position: static;
    top:150px;
    left:150px;
    width: 50px;
    height: 50px;
    background-color: red;
    background:#98de45;
}​
于 2012-05-21T22:38:48.230 に答える
0

これがうまくいくことを願っています

http://jsfiddle.net/a9Feu/35/

.inner{
    position: absolute;
    **border-bottom-right-radius: 100% 110%;**
    top:150px;
    left:150px;
    width: 38px;
    height: 35px;
    background-color: red;
    background:#98de45;
}​
于 2012-05-22T06:31:41.953 に答える