Skip to content

Instantly share code, notes, and snippets.

@szilagyi

szilagyi/base64_css_arrows

Created September 19, 2013 14:17
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save szilagyi/6624176 to your computer and use it in GitHub Desktop.
Save szilagyi/6624176 to your computer and use it in GitHub Desktop.
Download ZIP
base64 arrows
Raw
base64_css_arrows
/* arrows */
.arrow-right {background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.arrow-bottom {background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
@Akiyamka
Copy link

Akiyamka commented Nov 15, 2019 •
edited

SVG White Arrows

/* 🔽 */
.arrow-bottom-white {
  background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTUgN0wxIDNIOUw1IDdaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==") no-repeat scroll 0 0 transparent;
}

/* ◀️ */
.arrow-left-white {
  background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTUgN0wxIDNIOUw1IDdaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==") no-repeat scroll 0 0 transparent;
  transform: rotate(90deg);
}

/* 🔼 */
.arrow-up-white {
  background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTUgN0wxIDNIOUw1IDdaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==") no-repeat scroll 0 0 transparent;
  transform: rotate(180deg);
}

/* ▶️ */
.arrow-right-white {
  background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTUgN0wxIDNIOUw1IDdaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==") no-repeat scroll 0 0 transparent;
  transform: rotate(-90deg);
}

SVG Black Arrows

/* 🔽 */
.arrow-bottom-black {
  background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSI+ICAgIDxwYXRoIGQ9Ik01IDdMMSAzSDlMNSA3WiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=") no-repeat scroll 0 0 transparent;
}

/* ◀️ */
.arrow-left-black {
  background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSI+ICAgIDxwYXRoIGQ9Ik01IDdMMSAzSDlMNSA3WiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=") no-repeat scroll 0 0 transparent;
  transform: rotate(90deg);
}

/* 🔼 */
.arrow-up-black {
  background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSI+ICAgIDxwYXRoIGQ9Ik01IDdMMSAzSDlMNSA3WiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=") no-repeat scroll 0 0 transparent;
  transform: rotate(180deg);
}

/* ▶️ */
.arrow-right-black {
  background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSI+ICAgIDxwYXRoIGQ9Ik01IDdMMSAzSDlMNSA3WiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=") no-repeat scroll 0 0 transparent;
  transform: rotate(-90deg);
}

ICON SOURCE

<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
   <path d="M5 7L1 3H9L5 7Z" fill="currentColor"/>
</svg>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment