CSS DIV 折角的代码

 折角代码

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

 

  .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;
  }