▷¿Cómo puedo hacer una flecha puntiaguda con un div en CSS? ✔️ Foro Ayuda 【 2024 】

Solución:

Aquí hay una flecha con puro CSS. Apoyado por todos navegadores. Me tomó menos de un minuto hacerlo …

jsFiddle

.arrow {
  width: 120px;
}

.line {
  margin-top: 14px;
  width: 90px;
  background: blue;
  height: 10px;
  float: left;
}

.point {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid blue;
  float: right;
}

<div class="arrow">
  <div class="line"></div>
  <div class="point"></div>
</div>

Creé esto, que puede usar para una flecha que apunta a la derecha.

En el script hay dos variables, widthofarrow y colorofarrow. Al cambiarlos, puede crear una flecha de cualquier tamaño o color.

http://jsfiddle.net/FKekh/3/

HTML:

<!DOCTYPE html>
<div id="main"></div>

CSS:

.rectcontainer {
    height:30px;
}

.arrowblock {

}
.arrowright {
float:right;
    }
.rect {
    width:100px;
    height:10px;
    background-color:transparent;
}

JAVASCRIPT:

widthofarrow=130;
colorofarrow="#345678";

$("#main").append("<div class="arrowblock"><div class="arrowright"></div><div class="rectcontainer"><div class="rect"></div><div class="rect" style="background-color:" + colorofarrow + ""></div><div class="rect"></div></div></div>");


$('.arrowblock').css('width', widthofarrow + 'px');
$('.rectcontainer').css('width', (widthofarrow - (30)) + 'px');    
$('.arrowright').css('border-top', (15) + 'px solid transparent');
$('.arrowright').css('border-bottom', (15) + 'px solid transparent');
$('.arrowright').css('border-left', (widthofarrow/4.333333333333333) + 'px solid ' + colorofarrow);

EDITAR

Actualicé el excelente código de JoshC para que pueda usarse para crear flechas de diferentes tamaños y colores.

http://jsfiddle.net/fqcFp/2/

¿Qué tal si usas una entidad html o un símbolo Unicode para tu flecha?

<div>&#8594;</div>

<div title="U+21A3: RIGHTWARDS ARROW WITH TAIL">↣</div>

div{
    font-size: 40px;
}

VIOLÍN

Hay más para elegir aquí

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

¿Cómo puedo hacer una flecha puntiaguda con un div en CSS?

Solución:

Utiliza Nuestro Buscador

Preguntas Relacionadas: