css切角效果，折角效果

html

<div class="one">12345</div>
<div class="two">abcde</div>

css

  .one{
    height: 200px;
    width: 200px;
    margin: 10px auto;
    line-height: 200px;
    background: yellowgreen;
    background:
              linear-gradient(-45deg,transparent 15px, yellowgreen 0)bottom right,
              linear-gradient(-135deg,transparent 15px, yellowgreen 0)top right,
              linear-gradient(135deg,transparent 15px, yellowgreen 0)top left,
              linear-gradient(45deg,transparent 15px, yellowgreen 0)bottom left;
              background-size: 50% 50%;
              background-repeat: no-repeat;
  }
  .two{
    height: 200px;
    width: 200px;
    margin: 10px auto;
    background: #58a;
    line-height: 200px;
    background:
              radial-gradient(circle at bottom right,transparent 15px, #58a 0)bottom right,
              radial-gradient(circle at top right,transparent 15px, #58a 0)top right,
              radial-gradient(circle at top left,transparent 15px, #58a 0)top left,
              radial-gradient(circle at bottom left,transparent 15px, #58a 0)bottom left;
              background-size: 50% 50%;
              background-repeat: no-repeat;
  }

acss的也可以这样写

@mixin current_color($bg,$tr){
  background: $bg;
  background:
              linear-gradient(-45deg,transparent $tr, $bg 0)bottom right,
              linear-gradient(-135deg,transparent $tr, $bg 0)top right,
              linear-gradient(135deg,transparent $tr, $bg 0)top left,
              linear-gradient(45deg,transparent $tr, $bg 0)bottom left;
              background-size: 50% 50%;
              background-repeat: no-repeat;
}
.one{
    height: 200px;
    width: 200px;
    margin: 10px auto;
    line-height: 200px;
    @include current_color(yellowgreen,15px)
  }

如图效果