Tecnología y Coaching para Emprendedores

Aprende a Hacer la Punta de una Flecha con CSS3

css3

En este tutorial aprenderás como hacer la punta de una flecha en todas las direcciones utilizando CSS3. Esto te permitirá mejorar tus diseños, como es el caso de nuestro buscador en la barra lateral. Un simple triángulo puede hacer que tu diseño gane en atractivo. Este es el resultado final:

Código HTML:

<div class="flecha_izquierda"></div>
<div class="flecha_derecha"></div>
<div class="flecha_arriba"></div>
<div class="flecha_abajo"></div>

Código CSS:

.flecha_izquierda{
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent; 
  border-right:50px solid #25aa00;
}

.flecha_derecha {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid blue;
}

.flecha_arriba {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid red;
}

.flecha_abajo {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid black;
}


Comentarios

  • Gioka Takazhi

    Como podría solo dejar el border de la fleca de color diferente al color de fondo.