<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.