Menu
I'm trying to convert some divs, using border radius. I almost obtain it, but sometimes divs look like 'eggs' haha This is my 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%;
}
And in html, I use javascript / jQuery in order to change the content of each div (basically text in divs: left-top,right-top, left-bottom, right-bottom ; and number in central div) on depending of the size of each 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');
});
This is how I see in Ripple extension of chrome: https://www.dropbox.com/s/k71kz5lahfolw95/screen.JPG
Can you help me in order to divs are always circles, and not eggs? Thanks in advance, Daniel
294
To draw a circle:
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 is the fiddle of the above.
Fixed width and height: http://jsfiddle.net/eC3jq/1/
circle contained in a div so that % width and height work properly: http://jsfiddle.net/eC3jq/2/
Source: CSS-Tricks
141
This can be usefull too, if you copy all this code to you site, it will work. Or you can see a demo:
https://jsfiddle.net/whLctrp4/
HTML code with calling JQuery function:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="pies">
</div>
Include JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
drawPie function - tak as parameters id/class html atribute, size (in px), percent of filling and color of the pie
<script>
function drawPie (id, size, percent, color) {
var sizeString = "" + size + "px";
var grad = 360/100*percent+90;
console.log(grad);
var pie = $("<span></span>");
pie.css({"width": sizeString,
"height": sizeString,
"display": "block",
"border-radius": "50%",
"background-color": color,
"float": "left",
"margin": "5px"
});
if(percent <= 50){
pie.css({"background-image": "linear-gradient("+ grad + "deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%)"});
} else if (percent >= 100) {
pie.css({"background-image": "none"});
} else {
pie.css({"background-image": "linear-gradient("+ (grad+180) + "deg, transparent 50%, "+color+" 50%), linear-gradient(+90deg, white 50%, transparent 50%)"});
}
$(id).append(pie);
}
For cycle for show, how it works:
for(i=0; i<=100; i+=1){
drawPie(".pies", 100, i, "orange");
}
</script>
</body>
</html>
answered Sep 22 '25 17:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With