CODEWITHSUNDEEP
htmlcsssvgbackground
Anwar Azeez
Anwar Azeez

Reputation: 101

SVG Background not scaling correctly

I'm trying to go for a look like this of sortsSo I'm trying to get my webpage to have a two tone look, one side plain and the other with a radial gradient.

I currently tried making it into an SVG and that failed horrible but I am not entirely sure how to get a triangle that goes from the top left, bottom left, and top right of the page, while also scaling to the browser size.

When I use the SVG as a background, there is a large white block around the top and bottom, and when I just simply don't use a background and just put in the svg code into the HTML it's so giant and I can't manage to get it to scale.

This photo was something I made in sketch but I am new to frontend and I've just had a rough time getting the angles color.

I can get everything else if I could just get the background to do that :c

Upvotes: 0

Views: 53

Answers (1)

Temani Afif
Temani Afif

Reputation: 272590

No need SVG you can do this with CSS and multiple background:

body {
  margin:0;
  height:100vh;
  
  background:
    linear-gradient(to bottom right,transparent 49.8%,grey 50%),
    radial-gradient(circle at top,yellow,black);
}

Upvotes: 3

Related Questions