Formas en CSS: ¿Cómo hacer un Cuadrado en HTML y CSS?

En este artículo, te voy a enseñar a cómo crear un cuadrado o cuadro en CSS y HTML, el cual podrás usar en tu diseño web, ya que en ocasiones necesitamos formas geométricas básicas como elementos decorativos que ayuden a mejorar la usabilidad del sitio web. Éstas, pueden estar en formato de imagen, icono vectorial o código puro como en este caso. Con este último, obtenemos el mismo resultado que en los demás pero con mayor rapidez.

Tutorial en vídeo

Si te gusta las explicaciones en vídeo, te dejo el videotutorial donde explico todo el proceso paso a paso.

Pero si no, sigue leyendo.

Tutorial paso a paso: ¿Cómo crear un cuadrado en CSS y HTML?

El cuadrado, es una de las figuras geométricas más fáciles de dibujar con CSS. A continuación, te enseño paso a paso a como crear un cuadrado en css de forma simple.

1. Crear DIV o contenedor

En el archivo o documento html donde desees agregar el cuadrado, crea un elemento div y luego le asignas la clase css cuadrado. Así como te lo muestro a continuación: 

1. Crear DIV | Cuadrado en CSS

Si recargas la página, aún no verás nada pero si revisas con el inspector de elemento, verás que ahí está.

Resultado en el navegador después de crear el DIV | Cuadrado en CSS

2. Dar forma por medio de CSS

Al elemento DIV o contenedor que creamos en el punto anterior, le daremos estilos por medio de la clase cuadrado asignándole un alto y un ancho de igual valor. Así:

.cuadrado {
     width: 150px; 
     height: 150px;
}

Ahora, para hacerlo visible, necesitamos usar un fondo o un borde de cualquier color.

2.1. Cuadrado con color de fondo

Para esta opción, agregamos un color de fondo usando la siguiente línea de código background: blue;. El código quedaría así:

.cuadrado {
     width: 150px; 
     height: 150px; 
     background: blue;
}

El resultado del código anterior sería un cuadrado con fondo azul como el siguiente:

2.2. Cuadrado con borde

Para esta opción, agregamos un borde usando la siguiente línea de código border: 1px solid #000;. El código quedaría así:

.cuadrado {
     width: 150px; 
     height: 150px; 
     border: 1px solid #000;
}

El resultado del código anterior sería un cuadrado con un borde negro como el siguiente:

Y listo, con eso habrás creado un cuadro o cuadrado en HTML & CSS. Tanto este código como los demás, úsalo en lo que quieras sin problema.

Demo y código fuente

Si solo quieres copiar y pegar o comparar el código, aquí te lo dejo completo.

Puedes enviarme una captura o un enlace al grupo en Facebook para ver cómo te quedo.
Si necesitas ayuda o tienes preguntas, déjamela en los comentarios.

Si te gustó, comparterlo 👇