<div class="box">
  Bear claw chocolate cake cotton candy marzipan sugar plum. Marzipan macaroon danish shortbread tiramisu powder jelly beans candy canes. Sugar plum sweet roll pie
</div>

<div class="box" style="--a:45deg">
  Bear claw chocolate cake cotton candy marzipan sugar plum. Marzipan macaroon danish shortbread tiramisu powder jelly beans candy canes. Sugar plum sweet roll pie
</div>

<div class="box" style="--a:180deg">
  Bear claw chocolate cake cotton candy marzipan sugar plum. Marzipan macaroon danish shortbread tiramisu powder jelly beans candy canes. Sugar plum sweet roll pie
</div>

<div class="box" style="--a:225deg">
  Bear claw chocolate cake cotton candy marzipan sugar plum. Marzipan macaroon danish shortbread tiramisu powder jelly beans candy canes. Sugar plum sweet roll pie
</div>

<div class="box" style="--a:290deg;--p:25px">
  Bear claw chocolate cake cotton candy marzipan sugar plum. Marzipan macaroon danish shortbread tiramisu powder jelly beans candy canes. Sugar plum sweet roll pie
</div>
.box {
  --b:20px;  /* size of cut */
  --a:90deg; /* angle of cut */
  --p:10px;  /* the padding */
  
  --g:#0000 var(--a),#000 0;
  max-width: 220px;    
  padding: calc(var(--b) + var(--p));
  margin: 5px;
  display:inline-block;
  box-sizing: border-box;
  background:linear-gradient(45deg,pink,lightblue);
  -webkit-mask:
    conic-gradient(from calc(var(--a)/-2 -  45deg) at top    var(--b) left  var(--b),var(--g)) 0    0,
    conic-gradient(from calc(var(--a)/-2 +  45deg) at top    var(--b) right var(--b),var(--g)) 100% 0,
    conic-gradient(from calc(var(--a)/-2 - 135deg) at bottom var(--b) left  var(--b),var(--g)) 0    100%,
    conic-gradient(from calc(var(--a)/-2 + 135deg) at bottom var(--b) right var(--b),var(--g)) 100% 100%;
          mask:
    conic-gradient(from calc(var(--a)/-2 -  45deg) at top    var(--b) left  var(--b),var(--g)) 0    0,
    conic-gradient(from calc(var(--a)/-2 +  45deg) at top    var(--b) right var(--b),var(--g)) 100% 0,
    conic-gradient(from calc(var(--a)/-2 - 135deg) at bottom var(--b) left  var(--b),var(--g)) 0    100%,
    conic-gradient(from calc(var(--a)/-2 + 135deg) at bottom var(--b) right var(--b),var(--g)) 100% 100%;
  -webkit-mask-size:50.1% 50.1%;
          mask-size:50.1% 50.1%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.