Custom CSS Arrows

by Austin Anderson

HTML

<div class="custom-arrows"></div>
<p>
If you need to insert HTML solely using CSS-classes, it can be done!
</p>
<p>
The arrow above was built via the <span class="type">content</span> property with css, using a <span class="type">URL</span> type that is coded as a <span class="type">data:image</span> as the type of <span class="type">svg/xml</span> to display the following block of HTML.
</p>
<xmp>
<div class="custom-arrows white arrow-sm" style="position:relative;height:15px;width:25px;">
  <div class="prefix" style="position:absolute;width:0;height:0;border-style:solid;border-width:7px 0 7px 6px;right:0;"></div>
  <div class="postfix" style="position:absolute;width:0;height:0;border-style:solid;border-width:7px 0 7px 6px;right:3px;"></div>
  <div class="line" style="right:3px;top:6px;height:2px;position:absolute;width:calc(25px - 5px);"></div>
</div>
</xmp>

<strong>NOTE: </strong> This route cannot process any stylesheets/scripts at this point so anything of that nature <i>must</i> be hardcoded as inline styling into the elements.

SCSS

.custom-arrows::after {
  content: url('data:image/svg+xml;%20charset=utf8,%20%3Csvg%20width%3D%22200%22%20height%3D%2260%22%0A%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%0A%20%3CforeignObject%20width%3D%22100%25%22%20height%3D%22100%25%22%20x%3D%220%22%20y%3D%220%22%3E%0A%09%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22color%3A%20blue%22%3E%0A%3Cdiv%20class%3D%22custom-arrows%20white%20arrow-sm%22%20style%3D%22position%3Arelative%3Bheight%3A15px%3Bwidth%3A25px%3B%22%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22prefix%22%20style%3D%22position%3Aabsolute%3Bwidth%3A0%3Bheight%3A0%3Bborder-style%3Asolid%3Bborder-width%3A7px%200%207px%206px%3Bright%3A0%3Bborder-color%3Atransparent%20transparent%20transparent%20%23000000%3B%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22postfix%22%20style%3D%22position%3Aabsolute%3Bwidth%3A0%3Bheight%3A0%3Bborder-style%3Asolid%3Bborder-width%3A7px%200%207px%206px%3Bright%3A3px%3Bborder-color%3Atransparent%20transparent%20transparent%20%23FFFFFF%3B%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22line%22%20style%3D%22right%3A3px%3Btop%3A6px%3Bheight%3A2px%3Bposition%3Aabsolute%3Bbackground-color%3A%23000000%3Bwidth%3Acalc(25px%20-%205px)%3B%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%09%3C%2Fdiv%3E%0A%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E%0A%0A');
}

.type {
  color: steelblue;
}