2 vertikale Hintergrundfarben für ein Schriftartikone

Question

Ich versuche, ein Flickr-Symbol mit Font-Awesome zu erstellen, und möchte die Farben genau darstellen (was auf jeder Seite des Symbols einen lila und blauen Punkt bedeutet).Ich versuche dies mit weniger Gradienten zu tun.Aber ich konnte nicht herausfinden, wie man die Gradienten vertikal ausrichtet (ich kann nur horizontal herausfinden).

was ich bisher habe:

generasacodicetagpre.

http://jsfiddle.net/fqjhe/2/

Dies verlässt die in der falschen Richtung gestapelten Gradienten und zeigt außerhalb der Symbole zusätzliche Farbe.Ich würde mich über die Zeiger darüber schätzen, wie die Gradienten gedreht werden, und jede Hilfe zu den überschüssigen Farben wäre auch großartig.

Answer 1

sieht so aus, wie du willst:

generasacodicetagpre.

Demo.

Answer 2

Referenz js feige

Anstelle von zwei verschiedenen Gradienten, warum nicht einen einzelnen Gradienten mit Anschlägen verwenden, die am selben Punkt starten und enden.

generasacodicetagpre.

Wie für den Überlauf habe ich es einfach kleiner gemacht und einen vertikalen Versatz gegeben, um in das Symbol passen.