Generated by SassMeister.com.

input.scss

// Demo artboard styles
html {
  background: #f4f4f4;
  font-size: 100%;
  font-family: Roboto, Helvetica, sans-serif;
  margin: 100px auto;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

// ----------------------
// ----- Tag Component
// ----------------------

$tag-border-left-width: 10px !default;
$tag-border-radius: 4px !default;
$tag-border-width: .125rem !default;
$tag-default-color: #557786 !default;

$tag-colors: (
  danger: red,
  info: blue,
  success: green,
  warning: yellow,
) !default;

// tag styles
.tag {
  border-left: $tag-border-left-width solid $tag-default-color;
  border-bottom-left-radius: $tag-border-radius;
  border-top-left-radius: $tag-border-radius;
  color: $tag-default-color;
  display: inline-block;
  font-size: .875rem;
  line-height: 1;
  padding: .5rem 1rem .5rem .5rem;
  position: relative;
  
  // outline
  &::after {
    background-color: inherit;
    border: $tag-border-width solid $tag-default-color;
    border-left: 0; // hide left border
    border-bottom-right-radius: $tag-border-radius; // only top & bottom need radius
    border-top-right-radius: $tag-border-radius; // since the left border is hidden
    box-sizing: border-box;
    content: '';
    
    // make outline the same dimensions as tag
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    
    // place outline behind tag
    z-index: -1;
    
    // transform it
    transform: skewX(-15deg);
    transform-origin: top right;
  }
  
  // space tags apart in a list
  & + & { margin-left: .5rem }
  
  // color options from above
  @each $color, $value in $tag-colors {
    &--#{$color} {
      border-left-color: $value;
      color: $value;
      
      &::after {
        border-color: $value;
      }
    }
  }
}

output.css

html {
  background: #f4f4f4;
  font-size: 100%;
  font-family: Roboto, Helvetica, sans-serif;
  margin: 100px auto;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

.tag {
  border-left: 10px solid #557786;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  color: #557786;
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  position: relative;
}
.tag::after {
  background-color: inherit;
  border: 0.125rem solid #557786;
  border-left: 0;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  box-sizing: border-box;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  transform: skewX(-15deg);
  transform-origin: top right;
}
.tag + .tag {
  margin-left: 0.5rem;
}
.tag--danger {
  border-left-color: red;
  color: red;
}
.tag--danger::after {
  border-color: red;
}
.tag--info {
  border-left-color: blue;
  color: blue;
}
.tag--info::after {
  border-color: blue;
}
.tag--success {
  border-left-color: green;
  color: green;
}
.tag--success::after {
  border-color: green;
}
.tag--warning {
  border-left-color: yellow;
  color: yellow;
}
.tag--warning::after {
  border-color: yellow;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}