Encode rgb parens

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index a8cb9a84c317097df8d43616cdb99b5805638d0a..bd13a51030c38d15af6e4ed0fd74180ed54d9c77 100644 (file)
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -110,7 +110,9 @@
 ///
 /// @param {Color} $color [$black] - Color to use for the triangle.
 @mixin background-triangle($color: $black) {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" fill="#{$color}"></polygon></svg>');
+  $rgb: 'rgb%28#{red($color)}, #{green($color)}, #{blue($color)}%29';
+
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: #{$rgb}"></polygon></svg>');
 
   @media screen and (min-width:0\0) {
     @if lightness($color) < 50% {