css 创建响应收据截止日期(锯齿形边框)

tjvv9vkg 于 12个月前发布在其他

关注(0)|答案(1)|浏览(75)

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

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

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

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>

css

来源：https://stackoverflow.com/questions/73561793/create-a-responsive-receipt-cutoff-zig-zag-border

1条答案

按热度按时间

yqyhoc1h1#

我有一个生成这种形状（https://css-generators.com/custom-borders/）的生成器，它也适用于任何背景。一个梯度，不需要伪元素。

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>

如果你想要阴影，你可以像下面这样做：

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>

赞(0）回复(0）举报 12个月前

我来回答

css 创建响应收据截止日期(锯齿形边框)

1条答案

相关问题

热门标签

最新问答