Imposibles Css: flecha con asta curva 29.2.12

Imposibles Css: flecha con asta curva

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);
}

Kseso

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