html - texto - generador de figuras geometricas css

Dibuja un círculo usando css solo

Question

Esta pregunta ya tiene una respuesta aquí:

• Cómo dibujar un círculo en la página html? 16 respuestas

¿Es posible dibujar un círculo usando css solamente, que puede funcionar en la mayoría de los navegadores (IE, Mozilla, Safari)?

Answer 1

Esto funcionará en todos los navegadores

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

Answer 2

Podría usar un .con anterioridad con un contenido con un símbolo Unicode para un círculo (25CF).

.circle:before {
  content: '' /25CF'';
  font-size: 200px;
}

<span class="circle"></span>

Sugiero esto como border-radius no funcionará en IE8 y abajo (reconozco el hecho de que la sugerencia es un poco mental).

Answer 3

Sí, dibuja una caja y dale un radio de borde que sea la mitad del ancho de la caja:

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

Demostración de trabajo:

http://jsfiddle.net/DsW9h/1/

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

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

Answer 4

el radio de la frontera es una buena opción, si se esfuerza con viejas versiones de IE, entonces intente códigos HTML

•

y usa CSS para cambiar el color. Salida:

•

Answer 5

sí, es posible que pueda usar la propiedad CSS de radio de borde. Para obtener más información, echa un vistazo a http://zeeshanmkhan.com/post/2/css-rounded-corner-gradient-drop-shadow-and-opacity

Answer 6

yup .. aquí está mi código:

<style>
  .circle{
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background-color: blue
  }
</style>
<div class="circle">
</div>

Answer 7

• Crea un div con un alto y ancho establecidos (por lo tanto, para un círculo, usa la misma altura y ancho), formando un cuadrado
• agregue un border-radius de border-radius del 50% que lo hará circular en forma. (nota: no se ha requerido prefijo por mucho tiempo )
• Luego puedes jugar con background-color / gradients / (incluso pseudo elements ) para crear algo como esto:

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.sphere {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 500%;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  display: inline-block;
  margin: 5%;
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '''';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: 15%;
  border-radius: 50%;
  transform: rotate(40deg);
}

<div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>