Skip to main content
adicionou 88 caracteres ao conteúdo
Fonte Link
Jorge B.
  • 11,6mil
  • 7
  • 52
  • 98

Podes fazer com CSS com duas formas, um retângulo e um triângulo. E assim podes por o tamanho que quiseres da seta.

 #triangle-right 
 { 
     width: 0;
     height: 0; 
     border-top: 50px solid transparent;    /* tamanho do topo ao meio */
     border-left: 75px solid red;           /* comprimeto da seta      */
     border-bottom: 50px solid transparent; /* tamanho do meio a baixo */
     margin-left:100px;                     /* comprimento da cauda    */
 }
 #rectangle 
 { 
     width: 100px;                          /* comprimento da cauda */
     height: 50px;                          /* largura da cauda     */
     background: red; 
     position: absolute; 
     margin-top:25px;                       /* metade da largura para ficar centrado*/
 }
<div>
  <div id="rectangle"></div>
  <div id="triangle-right"></div>
</div>

Fonte das formas

Podes fazer com CSS com duas formas, um retângulo e um triângulo. E assim podes por o tamanho que quiseres da seta.

 #triangle-right 
 { 
     width: 0;
     height: 0; 
     border-top: 50px solid transparent; 
     border-left: 75px solid red; 
     border-bottom: 50px solid transparent; 
     margin-left:100px; 
 }
 #rectangle 
 { 
     width: 100px; 
     height: 50px; 
     background: red; 
     position: absolute; 
     margin-top:25px; 
 }
<div>
  <div id="rectangle"></div>
  <div id="triangle-right"></div>
</div>

Fonte das formas

Podes fazer com CSS com duas formas, um retângulo e um triângulo. E assim podes por o tamanho que quiseres da seta.

 #triangle-right 
 { 
     width: 0;
     height: 0; 
     border-top: 50px solid transparent;    /* tamanho do topo ao meio */
     border-left: 75px solid red;           /* comprimeto da seta      */
     border-bottom: 50px solid transparent; /* tamanho do meio a baixo */
     margin-left:100px;                     /* comprimento da cauda    */
 }
 #rectangle 
 { 
     width: 100px;                          /* comprimento da cauda */
     height: 50px;                          /* largura da cauda     */
     background: red; 
     position: absolute; 
     margin-top:25px;                       /* metade da largura para ficar centrado*/
 }
<div>
  <div id="rectangle"></div>
  <div id="triangle-right"></div>
</div>

Fonte das formas

adicionou 88 caracteres ao conteúdo
Fonte Link
Jorge B.
  • 11,6mil
  • 7
  • 52
  • 98

Podes fazer com CSS com duas formas, um retângulo e um triângulo. E assim podes por o tamanho que quiseres da seta.

 #triangle-right 
 { 
     width: 0;
     height: 0; 
     border-top: 50px solid transparent; 
     border-left: 75px solid red; 
     border-bottom: 50px solid transparent; 
     margin-left:100px; 
 }
 #rectangle 
 { 
     width: 100px; 
     height: 50px; 
     background: red; 
     position: absolute; 
     margin-top:25px; 
 }
<div>
  <div id="rectangle"></div>
  <div id="triangle-right"></div>
</div>

Fonte das formas

Podes fazer com CSS com duas formas, um retângulo e um triângulo. E assim podes por o tamanho que quiseres da seta.

 #triangle-right 
 { 
     width: 0;
     height: 0; 
     border-top: 50px solid transparent; 
     border-left: 75px solid red; 
     border-bottom: 50px solid transparent; 
     margin-left:100px; 
 }
 #rectangle 
 { 
     width: 100px; 
     height: 50px; 
     background: red; 
     position: absolute; 
     margin-top:25px; 
 }
<div>
  <div id="rectangle"></div>
  <div id="triangle-right"></div>
</div>

Podes fazer com CSS com duas formas, um retângulo e um triângulo. E assim podes por o tamanho que quiseres da seta.

 #triangle-right 
 { 
     width: 0;
     height: 0; 
     border-top: 50px solid transparent; 
     border-left: 75px solid red; 
     border-bottom: 50px solid transparent; 
     margin-left:100px; 
 }
 #rectangle 
 { 
     width: 100px; 
     height: 50px; 
     background: red; 
     position: absolute; 
     margin-top:25px; 
 }
<div>
  <div id="rectangle"></div>
  <div id="triangle-right"></div>
</div>

Fonte das formas

Fonte Link
Jorge B.
  • 11,6mil
  • 7
  • 52
  • 98

Podes fazer com CSS com duas formas, um retângulo e um triângulo. E assim podes por o tamanho que quiseres da seta.

 #triangle-right 
 { 
     width: 0;
     height: 0; 
     border-top: 50px solid transparent; 
     border-left: 75px solid red; 
     border-bottom: 50px solid transparent; 
     margin-left:100px; 
 }
 #rectangle 
 { 
     width: 100px; 
     height: 50px; 
     background: red; 
     position: absolute; 
     margin-top:25px; 
 }
<div>
  <div id="rectangle"></div>
  <div id="triangle-right"></div>
</div>