Cómo hacer un fondo circular usando css?

Question

Necesito hacer algo como esto. y quiero hacerlo por un <div></div> que tiene width en %

puedo hacer esto mediante el uso de una imagen y la adición de otro div dentro y z-index.

Pero quiero saber si es posible hacer en este círculo en el fondo con css.

Answer 1

Se puede hacer utilizando la propiedad border-radius. básicamente, necesita establecer el radio del borde exactamente a la mitad de la altura y el ancho para obtener un círculo.

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 2

Puede utilizar los :before y :after pseudo-clases para poner un fondo de varias capas sobre un elemento.

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

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

Answer 3

Si quiere hacerlo con sólo 1 elemento, se puede utilizar el :: antes y después :: pseudo elementos de la misma div en lugar de un envoltorio.
Ver http://css-tricks.com/pseudo-element-roundup/

Answer 4

Here es una solución para hacerlo con un solo elemento div con propiedades CSS, border-radius hace la magia.

CSS:

.circle{ 
    width:100px; 
    height:100px; 
    border-radius:50px; 
    font-size:20px; 
    color:#fff; 
    line-height:100px; 
    text-align:center; 
    background:#000 
} 

HTML:

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

Answer 5

Comprobar la siguiente CSS. Demo

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

Para más formas puede seguir siguientes direcciones:

http://davidwalsh.name/css-triangles

Answer 6

que sea sencillo:

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

anchura y la altura puede ser cualquier cosa, como siempre y cuando sean iguales

Answer 7

Degradados?

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/