How to create Rectangle With Gradient Color Stripes Border via CSS?

问题

I want to create Round Edges Rectangle With Gradient Color Stripes Border.

I want to use the img tag or div tag to include the image and the Gradient Striped Border.

This is how it needs to look like:

I try to search around and i found that (SCSS) example: https://jsfiddle.net/rami7250/yujsz7wf/

and i got this SCSS code:

.module {
  background: white;
  border: 1px solid #ccc;
  margin: 3%;
  > h2 {
    padding: 1rem;
    margin: 0 0 0.5rem 0;
  }
  > p {
    padding: 0 1rem;
  }
  /*animation: widen 10s linear alternate infinite;*/
}

.stripe-1 {
  color: white;
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

As you can see, that feature effect only background and not border.

How do I make that Rectangle to display Gradient Color Stripes in his Border Via CSS/SCSS?

回答1:

One option would be to use a linear-gradient in the required pattern as background-image and put the required content on top of this background. This approach would work as long as the content, be it image or any text or whatever doesn't require to be transparent. The output is also responsive as can be seen by hovering on the element.

With just the strips: (a white layer is placed on top of the gradient to show only the strips)

div {
  height: 250px;
  width: 400px;
  background: linear-gradient(white, white), 
              linear-gradient(60deg, orange 0%, orange 3.5%, white 3.5%, white 7%, hotpink 7%, hotpink 10.5%, black 10.5%, black 14%, brown 14%, brown 17.5%, aqua 17.5%, aqua 21%, green 21%, green 25%, orange 25%, orange 28.5%, white 28.5%, white 32%, hotpink 32%, hotpink 35.5%, black 35.5%, black 39%, brown 39%, brown 42.5%, aqua 42.5%, aqua 46%, green 46%, green 50%, orange 50%, orange 53.5%, white 53.5%, white 57%, hotpink 57%, hotpink 60.5%, black 60.5%, black 64%, brown 64%, brown 67.5%, aqua 67.5%, aqua 71%, green 71%, green 75%, orange 75%, orange 78.5%, white 78.5%, white 82%, hotpink 82%, hotpink 85.5%, black 85.5%, black 89%, brown 89%, brown 92.5%, aqua 92.5%, aqua 96%, green 96%, green 100%);
  padding: 10px 20px;
  border-radius: 20px;
  background-origin: content-box, padding-box;
  background-clip: content-box, padding-box;
}

/* just for demo */

div {
  transition: all 1s;
}
div:hover {
  height: 300px;
  width: 500px;
}

<div></div>

With image inside the div:

div {
  height: 250px;
  width: 400px;
  background: linear-gradient(white, white), linear-gradient(60deg, orange 0%, orange 3.5%, white 3.5%, white 7%, hotpink 7%, hotpink 10.5%, black 10.5%, black 14%, brown 14%, brown 17.5%, aqua 17.5%, aqua 21%, green 21%, green 25%, orange 25%, orange 28.5%, white 28.5%, white 32%, hotpink 32%, hotpink 35.5%, black 35.5%, black 39%, brown 39%, brown 42.5%, aqua 42.5%, aqua 46%, green 46%, green 50%, orange 50%, orange 53.5%, white 53.5%, white 57%, hotpink 57%, hotpink 60.5%, black 60.5%, black 64%, brown 64%, brown 67.5%, aqua 67.5%, aqua 71%, green 71%, green 75%, orange 75%, orange 78.5%, white 78.5%, white 82%, hotpink 82%, hotpink 85.5%, black 85.5%, black 89%, brown 89%, brown 92.5%, aqua 92.5%, aqua 96%, green 96%, green 100%);
  padding: 10px 20px;
  border-radius: 20px;
  background-origin: content-box, padding-box;
  background-clip: content-box, padding-box;
}
img {
  height: 250px;
  width: 400px;
}
/* just for demo */

div, img {
  transition: all 1s;
}
div:hover, div:hover img {
  height: 300px;
  width: 500px;
}

<div>
  <img src='http://lorempixel.com/400/250/nature/1' />
</div>

With repeating linear gradient: (thanks to vals for creating the demo)

div {
  height: 250px;
  width: 400px;
  background: linear-gradient(white,white), repeating-linear-gradient(60deg, orange 0%, orange 3.5%, white 3.5%, white 7%, hotpink 7%, hotpink 10.5%, black 10.5%, black 14%, brown 14%, brown 17.5%, aqua 17.5%, aqua 21%, green 21%, green 25%);
  background-attachment: padding-box, border-box;
  padding: 10px 20px;
  border-radius: 20px;
  background-origin: content-box, padding-box;
  background-clip: content-box, padding-box;
}

/* just for demo */

div {
  transition: all 1s;
}
div:hover {
  height: 300px;
  width: 500px;
}

<div>
</div>

Note: The jagged edges are something that are tough to avoid when using angled gradients. They can be reduced by adjusting the color stop points.

回答2:

There is no need for this to be so convoluted, it takes two lines of CSS:

.module {
    border: 20px solid;
    border-image: repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px) 20;
}

A fork of your Fiddle: https://jsfiddle.net/5k70jt5f/1/

回答3:

Found somthing that can be a key to that design. See here: https://jsfiddle.net/rami7250/jaca7sb4/

Here is the source of the code: http://codepen.io/SitePoint/pen/DKhkf

CSS:

div {
  position: relative;
  height: 100%;

}
div:before, div:after {
  position: absolute;
  content: '';
  height: 1em;
  top: 0;
  left: 0;
  right: 0;
}
div:after {
  top: auto;
  bottom: 0;
}
div:before {
  background: linear-gradient(90deg, #1abc9c 1%, #2ecc71 1%, #2ecc71 29%, #3498db 29%, #3498db 32%, #9b59b6 32%, #9b59b6 37%, #34495e 37%, #34495e 53%, #f1c40f 53%, #f1c40f 69%, #e67e22 69%, #e67e22 67%, #e74c3c 67%, #e74c3c 74%, #ecf0f1 74%, #ecf0f1 100%, #95a5a6 100%);
}
div:after {
  background: linear-gradient(90deg, #1abc9c 10%, #2ecc71 10%, #2ecc71 12.5%, #3498db 12.5%, #3498db 28%, #9b59b6 28%, #9b59b6 35%, #34495e 35%, #34495e 60%, #f1c40f 60%, #f1c40f 69%, #e67e22 69%, #e67e22 83%, #e74c3c 83%, #e74c3c 88%, #ecf0f1 88%, #ecf0f1 96%, #95a5a6 96%);
}

div {
  padding-top: 20px;
  width: 450px;
}

However, i cant set it on the right and left side of the div. Only top and bottom effected.

来源：https://stackoverflow.com/questions/37549883/how-to-create-rectangle-with-gradient-color-stripes-border-via-css

标签

css

Sass

border

linear-gradients