Cacher is the code snippet organizer for pro developers

/* ============================================================ 
  Lets start with a function to intercept the data being 
  established by the colors that are about to be used
 ============================================================ */

@function color-encode($col) {
    @return '%23' + str-slice('#{$col}', 2, -1) // %23 is the encoded valu for the '#' symbol
}

/* ========================================================== */

// lets make a list of colors...
$colors: '#4491c5', '#3e703c', '#7a1224', '#d79400';

// Now lets setup a for loop to count and iterate the colors
@for $i from 1 through length($colors) {
  &:nth-of-type(#{length($colors)}n+#{$i}) {
    
    // this is the variable we will use to feed to the aforementioned
    // function that will reformat the color valuses as needed.
    $ui-corner-color: nth($colors, $i); 
    
    div {
       position: relative;
       
       // we want rhis to exist as a pseudo for... "reasons"
       // really... take it as you will
      &:after {
        conntent:'';
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 18px;
        height: 36px;
        width: 36px;
        
        //  We've already url encoded the main bits as we needed, 
        //  but if we are trying to iterate through colors on this
        //  for loop, then we need a slightly different process.
        //
        //  lets bake in our function on the 'fill' attribute - #{color-encode($ui-corner-color)}
        //  since there are browsers (FireFox) that take issue with SVG being formatted and
        //  url encoded properly, our function will automatically iterate
        //  throuigh our list of colors and url encode the '#' within the SVG code
        //  so that we can use our created variable of $ui-corner-color
        //  as needed within our for loop scope and not have to worry
        //  about any kind of concatenation or improper hex color formatting on other CSS values
        
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='#{color-encode($ui-corner-color)}' d='M-4.5 104.5l109-109v109'/%3E%3C/svg%3E");
        background-size: cover;
      }
    }
  }