Background with Angle

[nikostzounakos]

Hello!

I am trying to create a background for a sections with 2deg angle.
I am not sure how this can be done, I tried to make it with ::after element, but had some trouble with the width.

Also there are 2 other rectangles (pink) at the corners of the main section which they are also having an angle and the responsive part is that while the screen is getting smaller, these should shrink until they disappear.

In this image it looks more clear what I mean. The view port is in the green area.

Is it so tricky to make it with angle or I am missing something?

[PaulOB]

You can use clip-path to create that effect.

Rough example:

[SamA74]

There is a similar topic here I answered using a pseudo element.

Transform rotate and negative rotate value on text makes the text become blurry

Apply the transform to a pseudo element for the visible box, the actual container can have no background and remain unmoved. https://codepen.io/SamA74/pen/zYdYpJo

[nikostzounakos]

Yes that’s true, so this is the only way?

Cause I think it’s a bit difficult to make it with the same angle as you like it with the clip-path.

[SamA74]

@nikostzounakos

so this is the only way?

In CSS there is rarely an only way.
The clipping path is one option.
The link I posted uses a simple rotation transform, but the get the skew effect with the angled sides, you could use a 3D transform with the same method.

@nikostzounakos

it’s a bit difficult to make it with the same angle as you like it

Is the precise angle critical?

[nikostzounakos]

Ok I will try it with 3d transform too!

Yes I want to make it exactly how it is in the design

Thanks!

[alexwalker]

If I understand what you are trying to achieve, there are quite a few different ways to approach it. I’d probably use three separate SVGs for each of the rectangles, and then embed them in your CSS as a stack of background-images.

background-image: 
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 393' %3E%3Crect width='1151.04' height='283' x='-20' y='78' style='fill:%23301350;stroke:%23bada55' transform='rotate(-2)'/%3E%3C/svg%3E"),
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 393'%3E%3Crect width='342.8' height='73.32' x='-165.41' y='59.34' style='fill:%23f9acef' transform='rotate(-2 6 96.01)'/%3E%3C/svg%3E"), 
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 393'%3E%3Crect width='343.78' height='69.75' x='924.2' y='263.93' style='fill:%23f1e1ff' transform='rotate(-2 1263.22 417.4)'/%3E%3C/svg%3E");
}

That would give you something like this.

I’ve set an arbitrary height on the container. The background-positions for all layers are currently set to ‘center top’ but you can align them each to left, right or center by providing three sets of background-positions separated by a comma. The order corresponds to the background-image order.

The SVGs will stay sharp and scalable and it’s pretty easy to see where the precise 2 degree rotation is set.

I use https://yoksel.github.io/url-encoder/ to set the SVGs up for CSS backgrounding.

See if that works or you.