Cómo hacer formas básicas y avanzadas con CSS puro

¿Alguna vez ha visto un sitio web de CSS puro donde todos y cada uno de los elementos se terminan a través de CSS? CSS hace más que solo diseñar elementos. Las formas CSS permiten a los diseñadores web crear rutas personalizadas como un triángulo, círculos, polígonos y más. De esta manera, ya no está obligado a insertar una imagen flotante con un fondo transparente, solo para sentirse decepcionado por un cuadro rectangular a su alrededor.

En este artículo, usaremos formas CSS y algunos valores funcionales para codificar formas diferentes.

Dibujar formas CSS básicas

Comencemos con las formas básicas como cuadrado, rectángulo, triángulo, círculo y elipse.

Cuadrado y rectángulo

El cuadrado y el rectángulo son las formas más fáciles de hacer en CSS. Todo lo que necesita hacer es crear un y dale un altura y un ancho.

HTML

CSS

.rec-sq {
pantalla: flex;
brecha: 2em;
margen: 2em;
}
.cuadrado {
ancho: 15rem;
altura: 15rem;
fondo: rgb (255, 123, 0);
}
.rectangle {
ancho: 24rem;
altura: 14rem;
fondo: rgb (0, 119, 128);
}

Producción:

Círculo y elipse

Solo necesita asignar un radio de borde del 50% a un cuadrado y obtendrá un círculo. Haz lo mismo con el rectángulo para obtener una elipse.

HTML

CSS

.circulo {
ancho: 15rem;
altura: 15rem;
fondo: rgb (255, 123, 0);
radio de borde: 50%;
}
.ellipse {
ancho: 24rem;
altura: 14rem;
fondo: rgb (0, 119, 128);
radio de borde: 50%;
}

Producción:

triangulos

Usaremos bordes para crear triángulos. ¿Se pregunta cómo funciona? Todo lo que necesita hacer es configurar el ancho y altura del triángulo a cero. Significa, avanzando, el ancho real del elemento será el ancho del borde. Además, es posible que ya sepa que los bordes del borde son diagonales de 45 grados entre sí. Dale diferentes colores a cada borde y establece tres de ellos en transparente. Al final, tendrás tu triángulo.

HTML

CSS

// común a todos
cuerpo {
pantalla: flex;
brecha: 5em;
margen: 15em;
}.muestra {
altura: 8.5em;
ancho: 8.5em;
borde superior: 1em sólido # 9ee780;
borde derecho: rgb sólido 1em (240, 241, 141);
borde inferior: rgb sólido 1em (145, 236, 252);
borde izquierdo: rgb sólido 1em (248, 115, 106);
} .triangle {
altura: 0;
ancho: 0;
borde superior: 5em sólido # 9ee780;
borde derecho: rgb sólido 5em (240, 241, 141);
borde inferior: rgb sólido 5em (145, 236, 252);
borde izquierdo: rgb sólido de 5em (248, 115, 106);
}

Producción:

Puedes jugar con altura y color del borde para obtener diferentes tipos de triángulos. Por ejemplo, puede crear un triángulo que apunte hacia la dirección ascendente dando la borde inferior un color sólido mientras que todos los demás bordes están configurados como transparentes. Además, puedes crear un triángulo apuntando hacia la dirección correcta o un triángulo en ángulo recto jugando con ancho del borde y color del borde.

HTML

CSS

.triangle-up {
altura: 0;
ancho: 0;
borde superior: 5em sólido transparente;
borde derecho: 5em transparente sólido;
borde inferior: rgb sólido 5em (145, 236, 252);
borde izquierdo: 5em transparente sólido;
}
.triangle-right {
ancho: 0;
altura: 0;
estilo de borde: sólido;
ancho del borde: 4em 0 4em 8em;
border-color: transparente transparente transparente rgb (245, 149, 221);
}
.triangle-bottom-right {
ancho: 0;
altura: 0;
estilo de borde: sólido;
ancho del borde: 8em 0 0 8em;
color del borde: transparente transparente transparente rgb (151, 235, 158);
}

Producción:

Crear formas avanzadas usando CSS

Puedes usar ::antes de y ::despuéspseudo-elementos para crear formas avanzadas. Con el uso inteligente de las propiedades de posición y transformación, puede crear fácilmente formas complejas utilizando CSS puro.

Forma de estrella (5 puntos)

Deberá manipular los bordes utilizando el valor de rotación de la transformación. La idea es crear dos lados usando un class = "estrella", los otros dos lados usando el ::después elemento, y el último lado usando el ::antes de elemento.

HTML

CSS

.star-five {
margen: 3,125 em 0;
posición: relativa;
bloqueo de pantalla;
ancho: 0em;
altura: 0em;
borde derecho: 6.25em transparente sólido;
borde inferior: rgb sólido 4.3em (255, 174, 81);
borde izquierdo: 6.25em transparente sólido;
transformar: rotar (35 grados);
}
.star-cinco: antes de {
borde inferior: rgb sólido 5em (255, 174, 81);
borde izquierdo: 2em transparente sólido;
borde derecho: 1.875em transparente sólido;
posición: absoluta;
altura: 0;
ancho: 0;
superior: -45px;
izquierda: -65px;
bloqueo de pantalla;
contenido: '';
transformar: rotar (-35 grados);
}
.star-cinco: después de {
posición: absoluta;
bloqueo de pantalla;
arriba: 3px;
izquierda: -105px;
ancho: 0;
altura: 0;
borde derecho: 6.25em transparente sólido;
borde inferior: rgb sólido 4.3em (255, 174, 81);
borde izquierdo: 5,95em transparente sólido;
transformar: rotar (-70 grados);
contenido: '';
}

Producción:

Pentágono

Puede crear un pentágono combinando un trapecio y un triángulo. Usar frontera y propiedades de posición darles forma y agruparlos.

HTML

CSS

.pentagon {
posición: relativa;
ancho: 10em;
tamaño de caja: caja de contenido;
ancho del borde: 10em 5em 0;
estilo de borde: sólido;
color del borde: rgb (7, 185, 255) transparente;
margen superior: 20rem;
margen izquierdo: 10rem;
}
.pentágono: antes de {
contenido: "";
posición: absoluta;
altura: 0;
ancho: 0;
superior: -18em;
izquierda: -5em;
ancho del borde: 0 10em 8em;
estilo de borde: sólido;
border-color: transparente transparente rgb (7, 185, 255);
}

Producción:

Diamante

Agrupe dos triángulos apuntando hacia arriba y hacia abajo usando la posición para crear una forma de diamante. Sí, usaremos el frontera propiedades para crear estos triángulos.

HTML

CSS

.diamond {
ancho: 0;
altura: 0;
posición: relativa;
superior: -3em;
borde: transparente sólido 3em;
color del borde inferior: rgb (129, 230, 255);
}
.diamond: después de {
contenido: '';
ancho: 0;
altura: 0;
posición: absoluta;
izquierda: -3em;
arriba: 3em;
borde: transparente sólido 3em;
color del borde superior: rgb (129, 230, 255);
}

Producción:

Puede crear una forma de escudo de diamante modificando la altura del triángulo superior como se muestra a continuación:

HTML

CSS

.diamante-escudo
{
ancho: 0;
altura: 0;
borde: transparente sólido 3em;
borde inferior: 1.25em rgb sólido (71, 194, 231);
posición: relativa;
superior: -3em;
}
.diamond-cut: después de {
contenido: '';
posición: absoluta;
izquierda: -3em;
superior: 1,25em;
ancho: 0;
altura: 0;
borde: transparente sólido 3em;
borde superior: rgb sólido 4.4em (71, 194, 231);
}

Producción:

Corazón

La forma del corazón es un poco dura, pero puedes hacerlo usando ::antes de y ::después pseudo-elementos. Puede utilizar diferentes valores de transformar para rotarlos desde diferentes ángulos hasta que formen perfectamente una forma de corazón. En última instancia, puede configurar origen de transformación para establecer el punto alrededor del cual se aplica la transformación.

HTML

CSS

.corazón {
ancho: 6.25em;
altura: 55em;
posición: relativa;
}
.corazón: antes,
.heart: after {
contenido: "";
ancho: 3em;
altura: 5em;
posición: absoluta;
izquierda: 3em;
arriba: 0;
fondo: rojo;
radio de borde: 3em 3em 0 0;
transformar: rotar (-45 grados);
origen de transformación: 0100%;
}
.heart: after {
izquierda: 0;
transformar: rotar (45 grados);
origen de transformación: 100% 100%;
}

Producción:

Experimente con formas de CSS puro

Ahora debería estar familiarizado con diferentes imágenes CSS puras que se pueden construir escribiendo unas pocas líneas de código. La creación de un sitio web ultrarrápido ya no es una tarea agitada, ya que sabes cómo jugar con el código. La mejor parte es que puede resonar con la voz de la marca manipulando diferentes formas y colores según sus necesidades. Por lo tanto, siga experimentando y descubra nuevas formas de dibujar formas asombrosas puramente con CSS.

Cómo construir una barra de navegación receptiva usando HTML y CSS

Llamando a todos los desarrolladores web principiantes: ¡este tutorial le brindará las habilidades que necesita para crear sus propias barras de navegación de respuesta usando solo HTML y CSS!

Leer siguiente

Sobre el Autor