.ribbon{width:145px;height:130px;overflow:hidden;position:absolute;z-index:10000}
.ribbon::before,.ribbon::after{position:absolute;z-index:-1;content:'';display:block;border:5px solid red}
.ribbon span{position:absolute;display:block;width:225px;padding:11px 0;box-shadow:0 5px 10px rgba(0,0,0,.1);color:#fff;font:700 18px/1 'Lato',sans-serif;text-shadow:0 1px 1px rgba(0,0,0,.2);text-transform:uppercase;text-align:center}
.ribbon-top-left{top:-10px;left:-10px}
.ribbon-top-left::before,.ribbon-top-left::after{border-top-color:transparent;border-left-color:transparent}
.ribbon-top-left::before{top:0;right:0}
.ribbon-top-left::after{bottom:0;left:0}
.ribbon-top-left span{right:-14px;top:30px;transform:rotate(-45deg)}
.box .env-local span.blue,.env-local::before,.env-local::after,.env-dev span.blue,.env-dev::before,.env-dev::after,.env-ppe span.blue,.env-ppe::before,.env-ppe::after,.env-perf span.blue,.env-perf::before,.env-perf::after,.env-stage span.blue,.env-stage::before,.env-stage::after{background-color:#00f;border-right-color:#00f;border-bottom-color:#00f}
.box .env-local span.yellow,.env-local::before,.env-local::after,.env-dev span.yellow,.env-dev::before,.env-dev::after,.env-ppe span.yellow,.env-ppe::before,.env-ppe::after,.env-perf span.yellow,.env-perf::before,.env-perf::after,.env-stage span.yellow,.env-stage::before,.env-stage::after{background-color:#7a7a00;border-right-color:#7a7a00;border-bottom-color:#7a7a00}
.box .env-local span.green,.env-local::before,.env-local::after,.env-dev span.green,.env-dev::before,.env-dev::after,.env-ppe span.green,.env-ppe::before,.env-ppe::after,.env-perf span.green,.env-perf::before,.env-perf::after,.env-stage span.green,.env-stage::before,.env-stage::after{background-color:#228734;border-right-color:#228734;border-bottom-color:#228734}
.box .env-local span.magenta,.env-local::before,.env-local::after,.env-dev span.magenta,.env-dev::before,.env-dev::after,.env-ppe span.magenta,.env-ppe::before,.env-ppe::after,.env-perf span.magenta,.env-perf::before,.env-perf::after,.env-stage span.magenta,.env-stage::before,.env-stage::after{background-color:#d100d1;border-right-color:#d100d1;border-bottom-color:#d100d1}
.box .env-local span.orange,.env-local::before,.env-local::after,.env-dev span.orange,.env-dev::before,.env-dev::after,.env-ppe span.orange,.env-ppe::before,.env-ppe::after,.env-perf span.orange,.env-perf::before,.env-perf::after,.env-stage span.orange,.env-stage::before,.env-stage::after{background-color:#b85900;border-right-color:#b85900;border-bottom-color:#b85900}
.box .env-local span.grey,.env-local::before,.env-local::after,.env-dev span.grey,.env-dev::before,.env-dev::after,.env-ppe span.grey,.env-ppe::before,.env-ppe::after,.env-perf span.grey,.env-perf::before,.env-perf::after,.env-stage span.grey,.env-stage::before,.env-stage::after{background-color:#4b4b4b;border-right-color:#4b4b4b;border-bottom-color:#4b4b4b}
.box .env-local span,.env-local::before,.env-local::after,.env-dev span,.env-dev::before,.env-dev::after,.env-ppe span,.env-ppe::before,.env-ppe::after,.env-perf span,.env-perf::before,.env-perf::after,.env-stage span,.env-stage::before,.env-stage::after{background-color:#4b4b4b;border-right-color:#4b4b4b;border-bottom-color:#4b4b4b}
.box .env-local span.red,.env-local::before,.env-local::after,.env-dev span.red,.env-dev::before,.env-dev::after,.env-ppe span.red,.env-ppe::before,.env-ppe::after,.env-perf span.red,.env-perf::before,.env-perf::after,.env-stage span.red,.env-stage::before,.env-stage::after{background-color:#eb0000;border-right-color:#eb0000;border-bottom-color:#eb0000}