5

Quiero hacer esta forma geométrica de la forma más sencilla en propiedades css, sin necesidad de hacer 3 triángulos y un rectángulo. Con el fondo amarillo y el borde rojo como en la imagen... introducir la descripción de la imagen aquí

6
  • Qué código a intentado? El "quiero" no es tan relevante. "Hice" es mejor.
    – Dev. Joel
    Commented el 18 sept. 2016 a las 22:01
  • ¿Es SVG una opción?
    – Alvaro Montoro
    Commented el 18 sept. 2016 a las 22:03
  • No @AlvaroMontoro el problema es que necesito hacerlo lo más simple posible para después poder variar las propiedades de color de borde y fondo sin que la página "pete" ya que habrá mas de un objeto como el de la imagen.
    – Ivan Soler
    Commented el 18 sept. 2016 a las 22:05
  • Con SVG tampoco sería tan complicado, de hecho, creo que sería tan simple como con CSS (o más), y podrías cambiar las propiedades tan fácilmente como con CSS (de hecho, podrías cambiarlas con CSS)
    – Alvaro Montoro
    Commented el 18 sept. 2016 a las 22:12
  • Ya @AlvaroMontoro lo pensé tras escribir la respuesta, además el tema de la compatibilidad seguro que está mejor resuelto. Si no tienes tiempo para hacer el ejemplo me encantaría que citases alguna fuente donde poder aprender más !
    – Ivan Soler
    Commented el 18 sept. 2016 a las 22:13

2 respuestas 2

8

Puedes usar los pseudo-elementos ::before y ::after y combinarlos con las transformaciones CSS (en concreto con skewY) para obtener el efecto que quieres:

.flecha {
  margin:20px;
}

.flecha::before {
  content:"";
  border:2px solid red;
  border-right:0;
  background:yellow;
  display:inline-block;
  position:relative;
  width:50px;
  height:20px;
  -ms-transform: skewY(-20deg); /* IE 9 */
  -webkit-transform: skewY(-20deg); /* Safari */
  transform: skewY(-20deg);
}

.flecha::after {
  content:"";
  border:2px solid red;
  border-left:0;
  background:yellow;
  display:inline-block;
  position:relative;
  width:50px;
  height:20px;
  -ms-transform: skewY(20deg); /* IE 9 */
  -webkit-transform: skewY(20deg); /* Safari */
  transform: skewY(20deg);
}
<div class="flecha"></div>

8

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>

2
  • Gracias Alvaro!
    – Ivan Soler
    Commented el 18 sept. 2016 a las 22:22
  • Impresionante...
    – Ivan Soler
    Commented el 18 sept. 2016 a las 22:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.