Formas en CSS: ¿Cómo hacer un Rectángulo en CSS y HTML?

En este artículo, te voy a enseñar a cómo crear un Rectángulo 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 rectángulo en CSS y HTML?

El rectángulo, al igual que el cuadrado, también es una figura geométrica fácil de dibujar con CSS. A continuación, te enseño paso a paso a como crear un rectángulo en css de forma simple.

1. Crear DIV o contenedor

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

1. Crear DIV | Rectángulo 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 | Rectángulo 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 rectangulo asignándole un alto y un ancho. Uno de los dos debe de ser ligeramente más grande que el otro. Adicionalmente, para poder verlo, le agregamos un fondo o un borde de cualquier color. De esta forma:

.rectangulo {
     width: 250px; 
     height: 150px; 
     background: blue;
}

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

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

Código fuente

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

See the Pen Rectángulo en CSS & HTML / Formas Geométricas Básica by WCODEV | Desarrollo Web Simple (@wcodev) on CodePen.

Mándame 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 👇