<div class="ribbon">
		<div class="wrap">
			<span class="ribbon6">丝带效果</span>
		</div>
	</div>

		// 固定一个宽高，使里面的子元素（before,after,ribbon6）溢出隐藏
		.ribbon{
			position: relative;
			width: 216px;
			height: 216px;
			padding-top: 8px;
			overflow: hidden;
			color: #fff;
		}
		.wrap {
			width: 188px;
			height: 188px;
			background: #ddd;
			position: absolute;
			padding: 10px;
			margin: 0 auto;
		}
		.wrap:before {
			content: " ";
			display: block;
			border-radius: 8px 8px 0 0;
			width: 40px;
			height: 8px;
			position: absolute;
			right: 80px;
			top: -8px;
			background: #4d6530;
		}
		.wrap:after{
			content: "";
			display: block;
			border-radius: 0 8px 8px 0;
			width: 8px;
			height: 40px;
			position: absolute;
			right: -8px;
			top: 80px;
			background: #4d6530;
		}
		// 旋转角度
		.ribbon6{
			position: absolute;
			top: 15px;
			right: -65px;
			display: inline-block;
			text-align: center;
			width: 200px;
			height: 40px;
			line-height: 40px;
			z-index: 2;
			overflow: hidden;
			transform: rotate(45deg);
			border: 1px dashed;
			background: #57dd43;
			box-shadow: 0 0 0 3px #57dd43,
				0 21px 5px  -18px rgba(0,0,0,.6);
			
		}

效果图