CODEWITHSUNDEEP
jquerycss
Daniel Garcia Sanchez
Daniel Garcia Sanchez

Reputation: 2344

draw circles using border radius

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

Upvotes: 4

Views: 12190

Answers (3)

juditth
juditth

Reputation: 81

JQuery

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>

Upvotes: 1

abhshkdz
abhshkdz

Reputation: 6365

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

Upvotes: 9

techfoobar
techfoobar

Reputation: 66663

Working demo: http://jsfiddle.net/XtTkG/3/

The demo works by making use of the resize event of the window object rather than the div itself. On each resize we size the div and its border radius, so that it renders as a perfect circle (i.e. width = height and radius = width/2)

Code:

$(window).resize(function(height) {
    var div = $('#div');
    var width = $('body').width() * 0.4;
    var radius = width/2;
    width += 'px';
    radius += 'px';
    div.css({
        width: width, height: width,
        '-moz-border-radius' : radius,
        '-webkit-border-radius' : radius,
        'border-radius' : radius
    });

    // rest of your code for font-size setting etc..
});

$(window).resize();

Upvotes: 0

Related Questions