jquery - 使用边界半径绘制圆

Question

我正在尝试使用边框半径转换一些 div。 我几乎得到它，但有时 div 看起来像“鸡蛋”哈哈 这是我的 CSS:

#div{   /*div central*/
    position:absolute;
    top:50%;
    margin-top: -20%;
    left:50%;
    margin-left: -20%;
    background: #00A8D9;
    width: 40%;
    height: 40%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border:3px solid #000;
}
#divSupIzq,#divSupDer,#divInfIzq,#divInfDer{    /*DIVs: left-top , right-top, left-bottom, right-bottom*/
    background: #ddd;
    width: 20%;
    height: 20%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border:3px solid #fff;
    position:absolute;
}
#divSupIzq{  /*Div left-top*/
    top:15%;
    left:10%;
}
#divSupDer{ /*Div right-top*/
    top:15%;
    right:10%;
}
#divInfIzq{ /*Div left-bottom*/
    bottom:15%;
    left:10%;
}
#divInfDer{ /*Div right-bottom*/
    bottom:15%;
    right:10%;
}

在 html 中，我使用 javascript/jQuery 来更改每个 div 的内容(基本上是 div 中的文本:左上、右上、左下、右下；以及中央 div 中的数字)取决于每个 div 的大小:

$('#div').resize(function(height){
                    var fuente = $(this).height()/2;
                    var margen = (fuente / 2)-5;
                    $('.contenido').css('font-size',fuente+'px');
                    $('.contenido').css('margin-top',margen+'px');  
                });

这是我在 chrome 的 Ripple 扩展中看到的: https://www.dropbox.com/s/k71kz5lahfolw95/screen.JPG

你能帮我让 div 始终是圆圈而不是鸡蛋吗？ 提前致谢，丹尼尔

Answer 1

画一个圆:

HTML

<div id="circle"></div>

CSS

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

Here是上面的 fiddle 。

固定宽度和高度:http://jsfiddle.net/eC3jq/1/

circle 包含在 div 中，以便 % 宽度和高度正常工作:http://jsfiddle.net/eC3jq/2/

来源:CSS-Tricks