0

I'm struggling to skew a div like the image below... whereby the bottom and top always cover 50% of the screen width if that makes sense.

I have attached an image for more info

EDIT: this is a photoshop image and I'm trying to recreate this with CSS.

enter image description here

Remco
  • 361
  • 2
  • 18
  • but it's 50% width. So be clear about *your* 50% --> show the result *you* want – Temani Afif May 19 '18 at 13:59
  • I know, sorry - should have specified that this is a photoshop image... that's how bad it's gotten. This is the result I want – Remco May 19 '18 at 14:01
  • Is your question how to calculate the skewX value to make the result as wide as the window? That isn't very clear. – Mr Lister May 19 '18 at 14:44
  • Yeah, so I'd like to recreate the above image, but the blue section should always be 50% of the width at both the bottom and the top - even when the screen size changes... if that makes sense – Remco May 19 '18 at 15:08

1 Answers1

1

I am not sure about the use case, but you can recreate this using 2 linear-gradient. Each one will have a triangle shape and will cover half the container.

body {
  margin: 0;
}

.container {
  height: 200px;
  background:
    linear-gradient(to top left, blue 50%,transparent 50.5%) left/50% 100% no-repeat,
    linear-gradient(to bottom right, blue 50%,transparent 50.5%) right/50.5% 100% no-repeat;
}
<div class="container">
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Oh wow. I never thought of using a gradient and instead was focussing on skewing a div. This is so much better. Thank you! – Remco May 19 '18 at 15:10
  • 1
    Just to let you know, I've applied a few variations of this and this is exactly what I needed. thanks again! – Remco May 19 '18 at 17:32