CODEWITHSUNDEEP
htmlcsslinear-gradients
Ace
Ace

Reputation: 325

How to make X linear-gradient effect using CSS?

I was trying to make something like (the image below) using CSS linear-gradient (actually it's a background full-width banner) but I can't seem to figure the deg out. Can anyone help?

enter image description here

CSS & HTML

#back {
  padding: 200px 0;
  color: black;
  background: 
  linear-gradient(120deg, red 25%, transparent 30%), 
  linear-gradient(60deg, yellow 25%, transparent 30%), 
  linear-gradient(-60deg, blue 10%, transparent 30%), 
  linear-gradient(240deg, green 25%, transparent 0%);
}
<section id="back">
  <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dictum velit. Sed nec enim leo. Quisque nec urna ex. Vestibulum ut aliquet ante, non consectetur nunc. Nunc ac consequat nisl. Etiam vitae scelerisque nisi. Vivamus ipsum ipsum, tincidunt
    at augue dapibus, tincidunt aliquet ligula. Curabitur id neque porttitor, sodales velit eget, cursus mi.</h3>
</section>

Any of your response will be greatly appreciated.

Upvotes: 1

Views: 1360

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106048

You may use linear-gradient and background-size.

You need to put together pieces. One color can be a single background-color:

You finally need to draw a square of any size

  #back,
.back {
  display: inline-block;
  margin: 1em;
  vertical-align: middle;
  padding: 100px;
  border: solid;
  height: 0;
  width: 0;
  color: black;
  background:
  /* red */
  linear-gradient(45deg, red 50%, transparent 50.1%) 0 0 no-repeat, 
  linear-gradient(135deg, red 50%, transparent 51%) 0 100% no-repeat, 
  /*yellow */
  linear-gradient(135deg, yellow 50%, transparent 50.1%) 100% 0% no-repeat, 
  linear-gradient(225deg, yellow 50%, transparent 51%) 0 0 no-repeat, 
  /* blue */
  linear-gradient(225deg, blue 50%, transparent 50.1%) 100% 100% no-repeat, 
  linear-gradient(-45deg, blue 50%, transparent 50.1%) 100% 0% no-repeat 
  /* green */
  green;
  background-size: 50% 50%
}

.back {
  padding: 0;
  height: 50px;
  width: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
<div id="back"></div>
<div class="back">test</div>

from your comment below, when direction is a better approach than degres.

#back {
  padding: 200px 0;
  color: black;
  color: black;
  background: 
  /* red */
  linear-gradient(to top right, red 50%, transparent 50.1%) 0 0 no-repeat, 
  linear-gradient(to bottom right, red 50%, transparent 51%) 0 100% no-repeat, 
  /*yellow */
  linear-gradient(to bottom right, yellow 50%, transparent 50.1%) 100% 0% no-repeat, 
  linear-gradient(to bottom left, yellow 50%, transparent 51%) 0 0 no-repeat, 
  /* blue */
  linear-gradient(to bottom left, blue 50%, transparent 50.1%) 100% 100% no-repeat, 
  linear-gradient(to top left, blue 50%, transparent 50.1%) 100% 0% no-repeat 
  /* green */
  green;
  background-size: 50% 50%;
  text-align: center;
}
<div id="back">  <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dictum velit. Sed nec enim leo. Quisque nec urna ex. Vestibulum ut aliquet ante, non consectetur nunc. Nunc ac consequat nisl. Etiam vitae scelerisque nisi. Vivamus ipsum ipsum, tincidunt
    at augue dapibus, tincidunt aliquet ligula. Curabitur id neque porttitor, sodales velit eget, cursus mi.</h3>
</div>

Upvotes: 5

Related Questions