En este tutorial aprendremos a crear una estrella similar a la del Capitán América haciendo uso de CSS

Para lograrlo vamos a utilizar las propiedades:

border-width, border-style, border-color, transform y nuestras viejas conocidas top y left

1. Primero comenzaremos creando la estructura de nuestro documento HTML y agregaremos un elemento div con un valor de class=”shield” y dentro otro elemento div con un valor de class=”shield__container”

.shield__container{
  background-color: #000;
  width: 8.5rem;
  height: 8.5rem;
}

El valor class=”shield__container” nos permitirá manipular la estrella como si fuese un solo elemento sin que se distorsione y lo utilizaremos más adelante para la siguiente parte del tutorial, por ahora le asignaremos las siguientes propiedades:

Para utilizar rem correctamente debemos establecer un font-size en el html para el caso será de 16px ya que la unidad de medida rem tomará como referencia el font-size de html para mostrar el tamaño del elemento, en caso de no establecer un font-size el navegador le asignará uno por defecto.

rem=font-size*10

2. Ahora pasaremos a dibujar nuestra estrella, para ello utilizaremos las propiedades border y los pseudo elementos: after y before.

Comenzaremos creando nuestra clase .container__star y le asignaremos las siguientes propiedades:

Observaremos que se nos mostrará un cuadrado formado por los bordes a los cuales le asignamos distinto color.

3. Para crear nuestra estrella solo utilizaremos la propiedad border-color la cual le asignaremos un color transparente, también modificaremos la propiedad border-width de los bordes para lograr la forma que queremos.

Y esta es la base de nuestra estrella, pero aun no esta lista.

4. Utilizaremos la propiedad transform: rotate con un valor de 180deg para rotarla en un ángulo de 180 grados. Además, necesitaremos establecer una separación del elemento con la parte superior del contenedor. Para ello, usaremos la propiedad margin-top con un valor de 2.75rem.y un margin-left con un valor de 0.25rem.

5. Teniendo la base lista pasaremos a crear los otros 2 elementos que formarán nuestra estrella, ya que los otros elementos utilizaran las mismas propiedades, con algunas variaciones vamos a reutilizar el código, para esto luego de la clase .container__star dejaremos un espacio y agregaremos las clases y pseudo elementos (mencionados en el paso 2) .container__star::before y .container__star::after, para que las nuevas clases también tengan asignadas estas propiedades, de tal manera que más adelante solo necesitaremos reescribir algunas de estas propiedades.

.container__star, .container__star::before, .container__star::after{
  ...
}

6. En la clase .container__star::before necesitaremos cambiar la rotación estableciendo un valor de 70deg y variamos el margin-top y margin-left, para que quede de la siguiente manera.

Recordemos que para mostrar las propiedades asignadas a los pseudo elementos after y before utilizamos la propiedad content, además, el tipo de posicionamiento será absoluto.

7. Para la clase .container__star::after haremos lo mismo, cambiando la rotación ahora por -70deg quedando de la siguiente manera.

Con esto tendremos creada nuestra estrella, la cual utilizaremos para el escudo del Capitán América que más adelante les explicaré en un interesante videotutorial. ¡Estén atentos a nuestras redes sociales para verlo! 

Espero les haya sido de utilidad este tutorial. No olviden compartir con sus amigos y dejarnos sus dudas y opiniones en la caja de comentarios. ¡Hasta la próxima!