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...
-
Qué código a intentado? El "quiero" no es tan relevante. "Hice" es mejor.– Dev. JoelCommented 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 SolerCommented 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 SolerCommented el 18 sept. 2016 a las 22:13
|
Mostrar 1 comentario más
2 respuestas
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>
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>