创建响应式，边缘（重复三角形）css边框 [英] Creating a responsive, fringed (repeating triangles) css border

问题描述

我一直在做一个模式一段时间，它要求一个边缘的底部边框在模态。问题是，根据视口大小，我目前的实施切割一边，这是不太理想。

这里是灵感来自哪里，谷歌的电子钱包应用程序，其通过以下方式实现：在伪造类之后，图像背景并重复。您可以看到边缘被切掉：

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

http：// jsfiddle .net / n28pa3dy / 1 /

如何以一种能够处理不同宽度的方式实现这个概念，同时保持一致的条纹比，

解决方案

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

  html {height：100％;背景：黑色; display：flex;} body {min-height：50％;颜色：白色;显示：flex; justify-content：center; font-size：4vw; alignment-items：center; padding-bottom：2vw; width：50vw; margin：auto;背景：线性梯度（45deg，透明2vw，灰色2vw），线性梯度（-45deg，透明2vw，灰色2vw），线性梯度（45deg，透明1.8vw，光栅1.8vw），线性梯度，透明1.8vw，白1.8vw）;背景尺寸：1vw calc（100％+ 1.5vw）;边框：0.2vw白色; border-bottom：none;}  

  ...  

  html {height： 100％;背景：黄色;} body {min-height：50％;背景：线性梯度（45deg，透明4em，灰色4em），线性梯度（-45deg，透明4em，灰色4em），线性梯度（45deg，透明3.5em，光栅3.8em），线性梯度，透明3.5em，光泽3.8em）; background-size：5.5em 100％;}  

bg-position让更有趣的形状...

  html {height：100％;背景：黄色;} body {min-height：50％;背景：线性梯度（45deg，透明4em，灰色4em）中心，线性梯度（-45deg，透明4em，灰色4em），线性梯度（45deg，透明3.5em， -45deg，透明3.5em，lightgray 3.8em）; background-size：5.5em 100％;}  

:) ....

I've been working on a pattern for a while which calls for a fringed bottom border on a modal. The problem, is that depending on the viewport size, my current implementation cuts of one side, which is less than ideal.

Here's where the inspiration came from, Google's Wallet app, which implements this via an :after psuedoclass, an image background and repeats. You can see that the edges are cut off:

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

Here is my CSS implementation, which also breaks on the edges:

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

How can one implement this concept in a way that can handle different widths while maintaining a consistent ratio of fringes, and thus not breaking on the edges?

解决方案

you can use linear-gradient and background-size:

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

you may break bg-position to make more funny shapes ...

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

and so on :) ....

这篇关于创建响应式，边缘（重复三角形）css边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！