Skip to main content
se añadieron 1233 caracteres en el cuerpo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Como te ponía en un comentario, sería casi más simple hacerlo con SVG, y tendría la ventaja de que sería fácil de escalar y podrías manipularlo igualmente. Aquí te dejo el código que es muy muy sencillo:

svg.flecha {
  overflow:visible;
  fill:yellow;
  stroke:red;
  stroke-width:2px;
  width:100px;
  height:40px;
}
<svg viewBox="0 0 100 40" class="flecha">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>

Te dejo un ejemplo interactivo para que veas que se puede manipular fácilmente usando CSS y un poquito de JavaScript:

var radios = document.querySelectorAll("input");
for (var x = 0; x < radios.length; x++) {
  radios[x].addEventListener("click", function() {
    document.querySelector("svg").setAttribute("class",  "flecha " + this.value);
  });
}
svg.flecha {
  overflow:visible;
  fill:yellow;
  stroke:red;
  stroke-width:2px;
  width:100px;
  height:40px;
}

svg.flecha.verde {
  fill:green;
  stroke:yellow;
}

svg.flecha.azul {
  fill:blue;
  stroke:green;
}
<div>
  <input type="radio" name="estilo" value="" checked /> Estilo Original
  <input type="radio" name="estilo" value="verde" /> Estilo Verde
  <input type="radio" name="estilo" value="azul" /> Estilo Azul
</div>

<svg viewBox="0 0 100 40" class="flecha">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>

Como te ponía en un comentario, sería casi más simple hacerlo con SVG, y tendría la ventaja de que sería fácil de escalar y podrías manipularlo igualmente. Aquí te dejo el código que es muy muy sencillo:

svg.flecha {
  overflow:visible;
  fill:yellow;
  stroke:red;
  stroke-width:2px;
  width:100px;
  height:40px;
}
<svg viewBox="0 0 100 40" class="flecha">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>

Como te ponía en un comentario, sería casi más simple hacerlo con SVG, y tendría la ventaja de que sería fácil de escalar y podrías manipularlo igualmente. Aquí te dejo el código que es muy muy sencillo:

svg.flecha {
  overflow:visible;
  fill:yellow;
  stroke:red;
  stroke-width:2px;
  width:100px;
  height:40px;
}
<svg viewBox="0 0 100 40" class="flecha">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>

Te dejo un ejemplo interactivo para que veas que se puede manipular fácilmente usando CSS y un poquito de JavaScript:

var radios = document.querySelectorAll("input");
for (var x = 0; x < radios.length; x++) {
  radios[x].addEventListener("click", function() {
    document.querySelector("svg").setAttribute("class",  "flecha " + this.value);
  });
}
svg.flecha {
  overflow:visible;
  fill:yellow;
  stroke:red;
  stroke-width:2px;
  width:100px;
  height:40px;
}

svg.flecha.verde {
  fill:green;
  stroke:yellow;
}

svg.flecha.azul {
  fill:blue;
  stroke:green;
}
<div>
  <input type="radio" name="estilo" value="" checked /> Estilo Original
  <input type="radio" name="estilo" value="verde" /> Estilo Verde
  <input type="radio" name="estilo" value="azul" /> Estilo Azul
</div>

<svg viewBox="0 0 100 40" class="flecha">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>

Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Como te ponía en un comentario, sería casi más simple hacerlo con SVG, y tendría la ventaja de que sería fácil de escalar y podrías manipularlo igualmente. Aquí te dejo el código que es muy muy sencillo:

svg.flecha {
  overflow:visible;
  fill:yellow;
  stroke:red;
  stroke-width:2px;
  width:100px;
  height:40px;
}
<svg viewBox="0 0 100 40" class="flecha">
  <path d="M0,20 50,0 100,20 100,40 50,20 0,40 Z" />
</svg>