Untitled

dabblet.css

.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
}

.wrapper:before {
	content: "NEWS";
	color: transparent;
	text-shadow: 0 5px 0 green, 0 6px 0 rgba(255,255,255,0.5);
	text-align: center;
  	font: bold 15px Sans-Serif;
	box-sizing: border-box;
	height: 0;
	width: 140px;	
	border-bottom: 30px solid lightgreen;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	position: absolute;	
	transform: rotate(-45deg);
	left: -43px;
	top: 8px;
}

.wrapper:after {
	content:"";
	transform: rotate(-45deg);
	background: green;
	width: 139px;
	height: 30px;
	position: absolute;
	left: -22px;
	top: 29px;
	z-index: -999;
}

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background: -webkit-gradient(linear, left top, left bottom,from(#BFDC7A), to(#8EBF45));
  color: #6a6340;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

dabblet.html

<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}