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

How to Incorporate an Anchor Link into a Div as well as its Pseudo Element using CSS, Javascript, or jQuery

Internet Explorer will automatically apply a blue border to a div element when a CSS gradient is utilized

What are the best techniques for styling a SELECT box with HTML and CSS?

Is your sticky sidebar getting in the way of your footer?

"Enhance your webpage with Flexslider and captivating stretched images

jQuery hover once the DOM has been updated

What is the best way to customize the MenuProps of Material UI Select component using createTheme?

A guide on retrieving nested objects from my API and parsing the resulting data in each iteration for individual elements

Using more than one submit button in an HTML form

The typewriter effect is configured to appear as a separate layout,

Invisibility of form data on new page - PHP and Javascript

What is the best way to display two radio buttons side by side in HTML?

Guide to repairing a CSS ball animation

Form submission button gets stuck after AJAX request is made

Enhancing user experience by implementing dynamic text box functionality that triggers ajax load for dropdown options using a combination

Customize the progress bar color in Bootstrap by setting a unique color to it

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

What is the best way to eliminate all instances of the period symbol from an array?

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

Magnific Popup displaying only the initial item