创建响应式，流苏（重复三角形）css边框

Question

我一直在研究一种模式，这种模式要求模态上有一个流苏的底边。问题是，根据视口大小，我当前的实现削减了一边，这是不太理想的。

这里的灵感源自谷歌的电子钱包应用程序，该应用程序通过以下方式实现此目的：在伪类，图像背景和重复之后。你可以看到边缘被切断了：

.receipt-main-section::after {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAkklEQ…MUwBTzA7EIEAtBFbEgK0JWDLKCA6oJqyIGqCAjVAMTuiIAuCdhjWF6oYAAAAAASUVORK5CYII=) 0 0 repeat-x;
content: "";
height: 8px;
margin: 12px 0 0 -22px;
position: absolute;
width: 100%;}

这是我的CSS实现，它也突破了边缘：

http://jsfiddle.net/n28pa3dy/1/

如何能够以一种能够处理不同宽度的方式实现这一概念，同时保持一致的条纹比例，从而不会破坏边缘？

Answer 1

你可以使用线性渐变和背景大小：

＆＃13;

＆＃13;

html {
  height:100%;
  background:black;
  display:flex;
}
body {
  min-height:50%;
    color:white;
  display:flex;
  justify-content:center;
  font-size:4vw;
  align-items:center;
  padding-bottom:2vw;
  width:50vw;
  margin: auto;
  background:
    linear-gradient(45deg , transparent 2vw, gray 2vw) ,
    linear-gradient(-45deg , transparent 2vw, gray 2vw) ,
    linear-gradient(45deg , transparent 1.8vw, lightgray 1.8vw) ,
    linear-gradient(-45deg , transparent 1.8vw, white 1.8vw);
  background-size: 1vw calc(100% + 1.5vw);
  border:0.2vw solid white;
  border-bottom:none;
}

＆＃13;

you may use vw units ...

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

html {
  height:100%;
  background:yellow;
}
body {
  min-height:50%;
  background:
    linear-gradient(45deg , transparent 4em, gray 4em),
    linear-gradient(-45deg , transparent 4em, gray 4em),
    linear-gradient(45deg , transparent 3.5em, lightgray 3.8em),
    linear-gradient(-45deg , transparent 3.5em, lightgray 3.8em);
  background-size: 5.5em 100%;
}

＆＃13;

＆＃13;

＆＃13;

你可能会破坏bg-position以制作更有趣的形状......

＆＃13;

＆＃13;

html {
  height:100%;
  background:yellow;
}
body {
  min-height:50%;
  background:
    linear-gradient(45deg , transparent 4em, gray 4em) center,
    linear-gradient(-45deg , transparent 4em, gray 4em) ,
    linear-gradient(45deg , transparent 3.5em, lightgray 3.8em) center,
    linear-gradient(-45deg , transparent 3.5em, lightgray 3.8em);
  background-size: 5.5em 100%;
}

＆＃13;

＆＃13;

＆＃13;

等等:) ....