Create circular shapes using the border-radius property

Question

Create circular shapes using the border-radius property

I've been experimenting with converting some divs using border radius and I've almost got it, but sometimes they end up looking like 'eggs' haha. Here is the CSS code I'm using:

#div{   /*central div*/
    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{    /*Individual divs: top-left , top-right, bottom-left, bottom-right*/
    background: #ddd;
    width: 20%;
    height: 20%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border:3px solid #fff;
    position:absolute;
}
#divSupIzq{  /*Top left Div*/
    top:15%;
    left:10%;
}
#divSupDer{ /*Top right Div*/
    top:15%;
    right:10%;
}
#divInfIzq{ /*Bottom left Div*/
    bottom:15%;
    left:10%;
}
#divInfDer{ /*Bottom right Div*/
    bottom:15%;
    right:10%;
}

In my HTML, I'm using JavaScript/jQuery to change the content of each div (text in top-left, top-right, bottom-left, bottom-right divs; and a number in the central div) based on the size of each div:

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

This is how it appears in Ripple extension for Chrome:

Can anyone help me ensure that the divs always maintain a circular shape, and not appear as eggs? Thanks in advance, Daniel

jquery css

Answer 1

Answer №1

Creating a circular shape:

Using HTML

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

Applying CSS

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

Click here to see the demonstration.

Example with fixed width and height: http://jsfiddle.net/eC3jq/1/

Achieving proper % width and height by containing circle within a div: http://jsfiddle.net/eC3jq/2/

Resource: CSS-Tricks

Answer 2

Creating a circular shape:

Using HTML

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

Applying CSS

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

Click here to see the demonstration.

Example with fixed width and height: http://jsfiddle.net/eC3jq/1/

Achieving proper % width and height by containing circle within a div: http://jsfiddle.net/eC3jq/2/

Resource: CSS-Tricks

Answer 3

Answer №2

JQuery

Here is a useful piece of code that you can copy to your website for it to work. Alternatively, you can check out a demo:

https://jsfiddle.net/whLctrp4/

This is the HTML code with a JQuery function call:

<!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>

The drawPie function takes parameters such as id/class HTML attribute, size (in pixels), 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);
    }

A for loop to show how drawPie function works:

    for(i=0; i<=100; i+=1){
        drawPie(".pies", 100, i, "orange");
    }

    </script>       

    </body>

</html>

Answer 4

JQuery

Here is a useful piece of code that you can copy to your website for it to work. Alternatively, you can check out a demo:

https://jsfiddle.net/whLctrp4/

This is the HTML code with a JQuery function call:

<!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>

The drawPie function takes parameters such as id/class HTML attribute, size (in pixels), 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);
    }

A for loop to show how drawPie function works:

    for(i=0; i<=100; i+=1){
        drawPie(".pies", 100, i, "orange");
    }

    </script>       

    </body>

</html>

Answer 5

Answer №3

To see the demo in action, click on this link: http://jsfiddle.net/AqSvP/4/

This particular demonstration functions by utilizing the resize event of the window object instead of the div itself. With each resize event, the div and its border radius are adjusted to appear as a perfect circle (ensuring width equals height and radius equals half of the width).

Here is the code snippet:

$(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
    });

    // additional code for adjusting font-size etc..
});

$(window).resize();

Answer 6

To see the demo in action, click on this link: http://jsfiddle.net/AqSvP/4/

This particular demonstration functions by utilizing the resize event of the window object instead of the div itself. With each resize event, the div and its border radius are adjusted to appear as a perfect circle (ensuring width equals height and radius equals half of the width).

Here is the code snippet:

$(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
    });

    // additional code for adjusting font-size etc..
});

$(window).resize();

Create circular shapes using the border-radius property

Answer №1

Answer №2

JQuery

Answer №3

Similar questions

Tips for preventing a React component from scrolling beyond the top of the page

Triggering the JavaScript KeyUp() event for input values consisting of multiple digits

Is it possible to create a collapse and expand animation that does not involve transitioning the `height

Deactivating The Canvas Element

An Overview of Implementing Ajax Calls for Partial Views on Form Submission

The div that scrolls gracefully within its boundaries

CSS Flexbox with 3 columns and a grid layout of 4 by 4, with one large item included

Building Dynamic Forms with React.js and Bootstrap for Easy Input Field Management

Is the homepage the only page rendering correctly?

Is there ever a situation when it's acceptable to forego graceful degradation?

Contrast between employing element selector for concealment and activation tasks

Customizing the style of a dropdown menu in React Material UI using NativeSelect

Personalized information boxes for particular data points within highcharts

Make the inner div within the td stretch to cover the entire height of the td

VueJS component fails to remain anchored at the bottom of the page while scrolling

Trigger specific scripts again after loading jQuery AJAX

What is the best way to incorporate a sliding effect into my cookie form?

Customizing Geonames JSON Ajax Request

Is it possible to utilize $(this) within the $.post() function?

Issue with fixed header in Vuetify v-data-table not functional