Creating a responsive, fringed (repeating triangles) css border

问题

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 pseudoclass, 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?

回答1:

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 :) ....

来源：https://stackoverflow.com/questions/35733392/creating-a-responsive-fringed-repeating-triangles-css-border

标签

html

css

css3

flexbox

pseudo-class