Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="sel"></div>

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

@import "compass";

	$debug-browser-support: true; $svg-gradient-shim-threshold: 0.1;
.sel
{
	@include background-image(

		linear-gradient(to right, #ff0000 2%, rgba(0, 0, 0, 0) 3%),  
		linear-gradient(to bottom, #008000 45%, rgba(0, 0, 0, 0) 45%),
		linear-gradient(225deg, rgba(0, 0, 0, 0) 55%, #008000 55%), 
		linear-gradient(45deg, #000000 45%, rgba(0, 0, 0, 0) 45%), 
		linear-gradient(315deg, rgba(0, 0, 0, 0) 45%, #000000 45%), 
		linear-gradient(to right, #008000 0%, #008000 100%));
	background-color: yellow;
	background-position: right center;
	background-size: 80px 100%;
	display: block;
	height: 80px;
	width: 100%;
	background-repeat: no-repeat;
}

SassMeister-output.css

.sel {
  /* Content for ie 9.
  Min version: unspecified.
  User threshold to keep: 0.1%. If ie 9 are omitted: 2.65995%. */
  /* Creating new -svg context. */
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjEwMCUiIHkxPSJ0byIgeDI9IjAlIiB5Mj0idG8iPjxzdG9wIG9mZnNldD0iMiUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48c3RvcCBvZmZzZXQ9IjMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9InRvIiB5MT0iMTAwJSIgeDI9InRvIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSIjMDA4MDAwIi8+PHN0b3Agb2Zmc2V0PSI0NSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), linear-gradient(225deg, rgba(0, 0, 0, 0) 55%, #008000 55%), linear-gradient(45deg, #000000 45%, rgba(0, 0, 0, 0) 45%), linear-gradient(315deg, rgba(0, 0, 0, 0) 45%, #000000 45%), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjEwMCUiIHkxPSJ0byIgeDI9IjAlIiB5Mj0idG8iPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDgwMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDgwMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  /* Capability css-gradients is prefixed with -moz because 0.80986% of users need it which is more than the threshold of 0.1%. */
  /* Creating new -moz context. */
  background-image: -moz-linear-gradient(left, #ff0000 2%, rgba(0, 0, 0, 0) 3%), -moz-linear-gradient(top, #008000 45%, rgba(0, 0, 0, 0) 45%), -moz-linear-gradient(225deg, rgba(0, 0, 0, 0) 55%, #008000 55%), -moz-linear-gradient(45deg, #000000 45%, rgba(0, 0, 0, 0) 45%), -moz-linear-gradient(135deg, rgba(0, 0, 0, 0) 45%, #000000 45%), -moz-linear-gradient(left, #008000 0%, #008000 100%);
  /* Capability css-gradients is not prefixed with -ms because 0% of users are affected which is less than the threshold of 0.1. */
  /* Capability css-gradients is not prefixed with -o because 0.06146% of users are affected which is less than the threshold of 0.1. */
  /* Capability css-gradients is prefixed with -webkit because 9.86652% of users need it which is more than the threshold of 0.1%. */
  /* Creating new -webkit context. */
  background-image: -webkit-linear-gradient(left, #ff0000 2%, rgba(0, 0, 0, 0) 3%), -webkit-linear-gradient(top, #008000 45%, rgba(0, 0, 0, 0) 45%), -webkit-linear-gradient(225deg, rgba(0, 0, 0, 0) 55%, #008000 55%), -webkit-linear-gradient(45deg, #000000 45%, rgba(0, 0, 0, 0) 45%), -webkit-linear-gradient(135deg, rgba(0, 0, 0, 0) 45%, #000000 45%), -webkit-linear-gradient(left, #008000 0%, #008000 100%);
  background-image: linear-gradient(to right, #ff0000 2%, rgba(0, 0, 0, 0) 3%), linear-gradient(to bottom, #008000 45%, rgba(0, 0, 0, 0) 45%), linear-gradient(225deg, rgba(0, 0, 0, 0) 55%, #008000 55%), linear-gradient(45deg, #000000 45%, rgba(0, 0, 0, 0) 45%), linear-gradient(315deg, rgba(0, 0, 0, 0) 45%, #000000 45%), linear-gradient(to right, #008000 0%, #008000 100%);
  background-color: yellow;
  background-position: right center;
  background-size: 80px 100%;
  display: block;
  height: 80px;
  width: 100%;
  background-repeat: no-repeat;
}

SassMeister-rendered.html

<div class="sel"></div>