Create a responsive receipt cutoff in css - html

Question

I am trying to make some HTML and CSS look like a receipt. I want the bottom of this receipt to look like it was torn off. I have gotten an ::after style that looks close to what I want, however on mobile devices it is showing up with some weird lines. I need a responsive design that looks good on mobile screen sizes.
Here is the design I am looking for:
Here is my attempt that is showing up with weird lines:
Here is my code I am using:
body {
background: black;
}
.StyledReceipt {
background-color: #fff;
width: 22rem;
position: relative;
padding: 1rem;
box-shadow: 0 -0.4rem 1rem -0.4rem rgba(0, 0, 0, 0.2);
}
.StyledReceipt::after {
background-image: linear-gradient(135deg, #fff 0.5rem, transparent 0),
linear-gradient(-135deg, #fff 0.5rem, transparent 0);
background-position: left-bottom;
background-repeat: repeat-x;
background-size: 1rem;
content: '';
display: block;
position: absolute;
bottom: -1rem;
left: 0;
width: 100%;
height: 1rem;
}
<div class="StyledReceipt">Test</div>

Answer 1

I have a generator for this kind of shapes (https://css-generators.com/custom-borders/) and it works with any background as well. One gradient and no pseudo element needed.
body {
background: black;
}
.StyledReceipt {
background: linear-gradient(45deg,#aaa,#fff);
width: 22rem;
padding: 1rem 1rem 2rem;
--mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/30px 100%;
-webkit-mask: var(--mask);
mask: var(--mask);
}
<div class="StyledReceipt">Test</div>
If you want shadow you can do like below:
body {
background: black;
}
.StyledReceipt {
width: 22rem;
padding: 1rem 1rem 2rem;
filter: drop-shadow(0 0 .2rem red); /* update the shadow here */
position: relative;
z-index: 0;
}
.StyledReceipt:before {
content:"";
position:absolute;
z-index:-1;
inset:0;
background: linear-gradient(45deg,#aaa,#fff);
--mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/30px 100%;
-webkit-mask: var(--mask);
mask: var(--mask);
}
<div class="StyledReceipt">Test</div>