我试图使一些HTML和CSS看起来像一个收据。我希望这个收据的底部看起来像它被撕掉了。我已经得到了一个：：after样式，看起来接近我想要的，但在移动的设备上，它显示了一些奇怪的线条。我需要一个响应设计，在移动屏幕大小上看起来不错。
这里是我正在寻找的设计：

下面是我的尝试，是显示与奇怪的线条：

下面是我正在使用的代码：

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>