CODEWITHSUNDEEP
javascripthtmlcsssass
userjmillohara
userjmillohara

Reputation: 467

How to do diagonal & irregular lines in CSS & HTML backgrounds / divs?

I have seen this in many websites so far, but I have no idea how it's done. I am wondering how here, in this image, which is a screenshot of the digitalocean website, the diagonal lines in the background are made? I know how to set the background of a div to a gradient or just a plain uniform color, but how do you do stuff like that?

There are also two sections separated like so. So instead of the separation being a straight line between two divs, there is a bump in there. I have no idea how things like this are implemented from a coding perspective and don't know what I should google to find out more. (I'm not even sure if these two things call for a similar solution) Thanks a lot for your understanding.

Upvotes: 0

Views: 526

Answers (1)

user4676340
user4676340

Reputation:

I don't have access to imgur, but I think I see what you're asking. Something like that ? 

.diag {
  background-image: linear-gradient(135deg, #fff 0, #fff 281px, #ddd 282px, #fff 283px, #fff 566px);
  background-size: 400px, 400px;
  height: 400px;
  width: 400px;
}
<div class="diag"></div>

About the "bump", a simple SVG can manage that I guess. But you can't do it with a non-image background property, I'm sure of that !

Upvotes: 1

Related Questions