<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;
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));
mask-composite: xor;
mask-composite: exclude;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.