2
我一直在模式上工作了一段时间,它需要一个模式上的流苏下边框。问题在于,根据视口大小,我目前实施的裁剪只是一面,这不太理想。创建一个响应式,流苏(重复三角形)的CSS边框
下面是灵感来自谷歌的电子钱包应用程序,它通过:伪类,图像背景并重复实现此功能。你可以看到,边缘被截断:
.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/
如何能否以一种可以处理不同宽度同时保持一致的方式来实现这一概念条纹比例,从而不会破坏边缘?
这里一些有趣的概念,但是我不能看你怎么上市实现增值的脊,以避免边问题。也许我忽略了它,所以我会尝试一下。 –
@ G.Mart我添加了一个边框并调整第一个片段,所以选择一个均匀的宽度或/和背景大小,你应该有三角形希望在底部和一个边框走向两边和顶部 –
好吧,我测试了这一点,但恐怕我不能接受这个答案,尽管它提出了很好的概念,因为边缘在较小的屏幕尺寸时会发生很大的扭曲。尽管如此,这是一个很好的答案! –