-1

I'm trying to create a background that is a block of colour, that meets the edges of the viewport on both left and right hand sides at varying heights.

I've managed to get close by messing about with a pseudo-element, before the element I want the background to appear on and skewing / translating it with CSS but it doesn't respond well to viewport changes, as its using percentage based offsets.

'&:before': {
      position: 'absolute',
      content: '""',
      height: 550,
      transform: 'skewY(-20deg) translate(-37%, -95%)',
      width: '100vw',
      backgroundColor: '#7879F1',
    },

Which yields the following result, but only at a very specific viewport width.

profile page, with the avatar background split diagnollay by a block of purple

Ideally I could just specify somehow the stop height on both the left and right sides independently.

I've tried drawing the shape with clip-path however that makes the content cut off at the edge of the shape.

Luke
  • 3,481
  • 6
  • 39
  • 63

0 Answers0