refs #19079 [fid_bbi] fix button styling

In Chrome (and possibly other browsers), the slanted icon background had a thin border when the zoom was set to odd numbers. Fixed by using `clip-path` instead of `transform` and some other tweaks.

themes/fid_bbi/scss/mixins/button.scss

@@ -31,30 +31,36 @@
 }
 
 // Skewed background for icon
+// 1: Fix narrow white border on some browser zoom levels by extending the
+//    background 1px on each side and using `clip-path` instead of
+//    `overflow: hidden` (with fallback for IE 11).
 @mixin button-icon-bg($size: small, $position: left) {
-  overflow: hidden;
   position: relative;
 
+  // IE 11 fix
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    overflow: hidden;
+  }
+
   &::before {
     background: currentColor;
+    clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
     content: '';
     display: block;
-    height: 100%;
-    left: 0;
+    height: calc(100% + 2px); // 1
+    left: -1px; // 1
     position: absolute;
-    top: 0;
-    transform: skew(-$skew);
-    transform-origin: 0 0;
-    width: g(1.75);
+    top: -1px; // 1
+    width: g(1.75) - 1px;
 
     @if ($size == big) {
-      width: g(2.25);
+      width: g(2.25) - 1px;
     }
 
     @if ($position == right) {
+      clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
       left: auto;
-      right: 0;
-      transform-origin: 100% 100%;
+      right: -1px; // 1
     }
   }