Crear un círculo con CSS
Anuncio:
Hola! Bienvenidos a Galisteo Cantero Software!
En esta ocasión os vamos a enseñar un truco muy simple pero bastante útil, como crear un círculo con CSS.
Lo primero será preparar nuestro html con un div al que pondremos una clase «redondeado»:
Document
A continuación, vamos a darle estilo al div para hacerlo redondo:
.redondeado {background: lightgrey; border-radius: 50%; height: 50px; width: 50px;}
El border-radius: 50% es el que hace la magia 🙂
De esta manera, conseguimos que un div sea redondeado, lo que nos puede servir para decorar muchos elementos de nuestra página y evitar así tener que incluir imágenes para ello, lo que dificulta nuestro desarrollo y la carga de la página.
Este mismo truco, nos servirá para cualquier etiqueta, párrafos, span… aunque, hay que tener en cuenta, que si el elemento tiene un display: inline por defecto, puede que tengamos que ponerle un display: block o display: inline-block.
Espero que os haya sido útil.
HackSaludos!
