SOURCE

<div class="fold">折角效果哦</div>
<div class="fold linear">折角效果哦</div>

.fold {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  width: 200px;
  height: 80px;
  color: #fff;
  line-height: 80px;
  text-align: center;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .5) 0) no-repeat 100% 0 / 2em 2em, linear-gradient(-135deg, transparent 1.4em, #06c 0);
}

.linear {
  background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .5)) no-repeat 100% 0 / 2em 2em, linear-gradient(-135deg, transparent 1.4em, #06c);
}