web-dev-qa-db-fra.com

Comment faire une div avec une forme circulaire?

je veux créer une div avec une couleur de fond rouge et une forme complètement circulaire

Comment puis je faire ça?

Css ou jquery les deux peuvent être utilisés

csscss-shapes
5
Saswat

En utilisant jquery et css, vous pouvez créer un cercle. Je donne ici une solution jQuery, comme solution CSS déjà fournie par d’autres. vérifiez jquery DEMO.

jQuery Code

$(document).ready(function()
{
  $("div").css("border-radius", "50%");
});

Code CSS

div
{
/*border-radius: 50%;*/
width: 50%;
height: auto;
padding-top: 50%;
background: #ef8913;
}
20
Kheema Pandey

Vous pouvez faire suite 

VIOLON

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

CSS

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

Autre forme SOURCE

14
Richa

Utilisez une propriété border-radius de 50%.

Donc par exemple:

.example-div {

    border-radius: 50%

}
3
Kevin Damstra

En utilisant un rayon de bordure de 50%, vous pouvez créer un cercle ..__ Voici un exemple:

CSS:

#exampleCircle{
    width: 500px;
    height: 500px;
    background: red;
    border-radius: 50%;
}

HTML:

<div id = "exampleCircle"></div>
2
Nirvik Baruah

Démo

css

div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
}

html

<div></div>
2
4dgaurav
.circle {
    border-radius: 50%;
    width: 500px;
    height: 500px;
    background: red;
}

<div class="circle"></div>

voir ceci VIOLON

2
bumbumpaw

Les éléments div, les primitives unlinke SVG circle, sont toujours rectangulaires. Mais vous pouvez utiliser des coins arrondis pour le rendre arrondi, par exemple:

div.circle{ border-radius:50px; }
1
dakab