Imposibles Css: flecha con asta curva

Imposibles Css: flecha con asta curva

Por Kseso ✎ 1
Créditos: Visto en un tuit de @chriscoyier el ejemplo original aquí.

Si quieres ver qué es exactamente lo que hay y dónde está la magia, sigue leyendo:

Le he añadido sombra (box-shadow) para que veas las dos piezas:
Un div con anchura y altura 0. La punta de la flecha es 1 borde superior coloreado, el inferior transparente y con anchura (90px). Los otros bordes a 0. Para apuntar hacia abajo girado con "rotate".
El palito de la flecha o asta lograda con el pseudoelemento :after.
El color es igual que antes un borde triangular y la curvatura en base a "border-radius". La orientación igual que antes con "rotate".
Y ese es el secreto del mago descubierto y estos los códigos:

.flecha { position: relative; width: 0; height: 0; border-top: 90px solid transparent; border-right: 90px solid #9DC425; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); } .flecha:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 30px solid #9DC425; border-radius: 200px 0 0 0; top: -119px; left: -98px; width: 120px; height: 120px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 1

  1. En verdad, en un principio me parecía magia, pero caray, tú lo haces tan simple.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap