<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:200deg">
  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:235deg;">
  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 {
  --s:20px;  /* size of cut */
  --b:5px; /* border thickness */
  --a:90deg; /* angle of cut */
  --p:10px;  /* the padding */
  
  max-width: 220px;    
  padding: calc(var(--s) + var(--p));
  margin: 5px;
  display:inline-block;
  box-sizing: border-box;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(45deg,red,blue);
  padding: var(--b);
  --g:#000 var(--a),#0000 0;
  -webkit-mask:
    conic-gradient(from calc(var(--a)/-2 -  45deg) at top    var(--s) left  var(--s),var(--g))
      0 0/50.1% 50.1% no-repeat content-box,
    conic-gradient(from calc(var(--a)/-2 -  45deg) at top    var(--s) left  var(--s),var(--g))
      0 0/50.1% 50.1% no-repeat,
    
    conic-gradient(from calc(var(--a)/-2 +  45deg) at top    var(--s) right var(--s),var(--g)) 
      100% 0/50.1% 50.1% no-repeat content-box,
    conic-gradient(from calc(var(--a)/-2 +  45deg) at top    var(--s) right var(--s),var(--g)) 
      100% 0/50.1% 50.1% no-repeat,
    
    conic-gradient(from calc(var(--a)/-2 - 135deg) at bottom var(--s) left  var(--s),var(--g)) 
      0 100%/50.1% 50.1% no-repeat content-box,
    conic-gradient(from calc(var(--a)/-2 - 135deg) at bottom var(--s) left  var(--s),var(--g)) 
      0 100%/50.1% 50.1% no-repeat,
    
    conic-gradient(from calc(var(--a)/-2 + 135deg) at bottom var(--s) right var(--s),var(--g)) 
      100% 100%/50.1% 50.1% no-repeat content-box,
    conic-gradient(from calc(var(--a)/-2 + 135deg) at bottom var(--s) right var(--s),var(--g)) 
      100% 100%/50.1% 50.1% no-repeat,
    
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,#000 0) 0 0/calc(100% - var(--b)) calc(100% - var(--b));
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.