<style>
  .fold-1 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    position: relative;
    width: 200px;
    height: 80px;
    border-radius: 0.5em;
    color: #fff;
    line-height: 80px;
    text-align: center;
    background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
  }
  .fold-1::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(
        to left bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.2) 0,
        rgba(0, 0, 0, 0.4)
      ) 100% 0 no-repeat;
    width: 1.73em;
    height: 3em;
    transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: inherit;
    box-shadow: -0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15);
  }
</style>
<div class="fold-1">折角效果哦</div>