创建一个响应式，流苏（重复三角形）的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

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

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; 
 
}

you may use vw units ...

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%; 
 
}

你可能会破坏BG-位置，使更有趣的形状.. 。

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%; 
 
}

等等:) ....