创建响应式收据撕边（锯齿边框）：解决移动端异常线条问题

我尝试用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>

修复方案 #

问题根源在于background-position写法错误，以及固定宽度导致的移动端适配问题，修改后的代码如下：

body {
  background: black;
}

.StyledReceipt {
  background-color: #fff;
  max-width: 22rem;
  width: 100%;
  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 1rem;
  content: '';
  display: block;
  position: absolute;
  bottom: -1rem;
  left: 0;
  width: 100%;
  height: 1rem;
  /* 可选：触发硬件加速，避免移动端渲染异常 */
  transform: translateZ(0);
}

<div class="StyledReceipt">Test</div>

修改说明 #

1. 修正背景定位：将background-position: left-bottom改为left bottom，错误写法会导致背景位置计算异常，这是CSS属性值的正确格式。
2. 响应式宽度：把固定宽度width:22rem改为max-width:22rem; width:100%，让收据在小屏幕上自动适配宽度。
3. 明确背景尺寸：将background-size:1rem补全为1rem 1rem，确保背景图案的宽高都被正确定义，避免缩放错位。
4. 硬件加速优化：添加transform: translateZ(0)可以触发移动端浏览器的硬件加速，减少渲染时的线条异常。

内容的提问来源于stack exchange，提问作者klaurtar1