Comment faire un fond circulaire en utilisant css ?

Question

J'ai besoin de faire quelque chose comme ça. et je veux le faire pour un <div></div> qui a width en %

Je peux le faire en utilisant une image et en ajoutant un autre div intérieur et z-index .

Mais je veux savoir s'il est possible de faire dans ce cercle en arrière-plan en utilisant css.

Answer 1

Restez simple :

 .circle
  {
    border-radius: 50%;
    width: 200px;
    height: 200px; 
  }

La largeur et la hauteur peuvent être n'importe quoi, tant qu'elles sont égales

Answer 2

Vérifiez avec le css suivant. Démo

 .circle { 
   width: 140px;
   height: 140px;
   background: red; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

Pour plus de formes, vous pouvez suivre les URL suivantes :

http://davidwalsh.name/css-triangles

Answer 3

Dégradés ?

 div {
  width: 400px; height: 400px;
  background: radial-gradient(ellipse at center,  #f73134 0%,#ff0000 47%,#ff0000 47%,#23bc2b 47%,#23bc2b 48%);
}

https://fiddle.jshell.net/su5oyd4L/

Answer 4

Cela peut être fait en utilisant la propriété border-radius en gros, vous devez définir le rayon de la bordure à exactement la moitié de la hauteur et de la largeur pour obtenir un cercle.

JSFiddle

HTML

 <div id="container">
    <div id="inner">
    </div>
</div>

CSS

 #container
{
    height:400px;
    width:400px;
    border:1px black solid;
}

#inner
{
    height:200px;
    width:200px;
    background:black;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    margin-left:25%;
    margin-top:25%;
}

Answer 5

Vous pouvez utiliser les :before et :after pour mettre un arrière-plan multicouche sur un élément.

 #divID : before {
    background: url(someImage);
}

#div : after {
    background : url(someotherImage) -10% no-repeat;
}