Como posso fazer uma seta pontiaguda com um div em CSS

Como posso fazer uma seta pontiaguda em CSS? Não só um triângulo, mas um com uma haste, como uma seta tradicional que seria disparada de um arco?

Estou a tentar fazê-lo criando um contentor div, contendo dois contentores, à esquerda e à direita. A direita conterá o triângulo, e a esquerda conterá três divs, cujo centro será colorido para criar a haste.

Aqui está o meu código:

HTML: 

<div id="main">
    <div class='arrowblock'>
        <div class='arrowright'></div>
        <div class='rectcontainer'>
            <div class='rect'></div>
            <div class='rect' style='background-color:green'>
            </div><div class='rect'>
            </div>
</div>

CSS: 

.rectcontainer {
    height:30px;
    width:100px;
}

.arrowblock {
    width:130px;
    border-top: 15px solid transparent;
}
.arrowright {
float:right;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 30px solid green;
}
.rect {
    width:100px;
    height:10px;
    background-color:transparent;
}
Há uma maneira mais simples de conseguir isto?

Author: Dicky Moore, 2013-09-15
Source

5 answers

Aqui está uma seta com pura CSS. Suportado por todos os navegadores. Demorei menos de um minuto a fazer..

enter image description here

JsFiddle

HTML

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

CSS

.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;
}
 21
Author: Josh Crozier, 2013-09-15 19:34:01
Eu criei isto, que você pode usar para uma seta que aponta para a direita.

No programa estão duas variáveis, widthofarrow e colorofarrow. Ao alterá-los, você pode criar uma seta de qualquer tamanho ou cor.

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

Actualizei o grande Código do JoshC para que possa ser usado para criar setas de tamanhos e cores diferentes.

Http://jsfiddle.net/fqcFp/2/

 3
Author: Dicky Moore, 2013-09-15 21:13:31
Que tal usar apenas uma entidade html ou um símbolo unicode para a sua seta: 
<div>&#8594;</div>

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

div{
    font-size: 40px;
}

VIOLINO

Há mais para escolher.
 2
Author: Danield, 2013-09-15 19:38:48
Levando a resposta do Josh um pouco mais longe, fiz um exemplo que ajusta a largura com base no recipiente mantendo-o puro CSS. Obrigado @ Josh pelo ponto de partida! Apoio alguns navegadores mais velhos, por isso isto é bom para mim. Podemos usar a transforme para rodar a seta como gostamos em navegadores mais modernos. HTH 
  <div class="RightArrow">
  <div class="line"></div>
  <div class="point"></div>
  </div>

  <!-- for very short arrows reduce the width of .line --> 

<style> /* style tag added so SO will syntax color please use *.css irl*/
.RightArrow {
   width:90%;
   position: relative;
}

.line {
   margin-top:8px;
   width:97%;
   background:blue;
   height:0.3em;
   float:left;
   position: absolute;
}
.point {    
   width: 0; 
   height: 0; 
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 37px solid blue;
   float:right;
}
</style>
 0
Author: Joe Johnston, 2017-06-23 15:14:12

Para construir sobre a resposta de @josh-crozier, você pode eliminar muito do HTML usando pseudo-elementos em vez disso:

JsFiddle

HTML: 

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

CSS: 

.arrow {
    position:relative;
    width:120px;
    margin:50px auto;
    height:0;
    border-bottom:10px solid blue;
}

.arrow::after { 
    content: '';
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid blue;
    position: absolute;
    right: -10px;
    top: -15px;
}

Para adicionar uma seta no início da linha usando o:: before element também é trivial: jsFiddle

 0
Author: Codemonkey, 2017-11-29 15:50:24