Search code examples
htmlcssbox-shadow

<div> with a sloped edge and box-shadow

How can I create the following mock-up in HTML and CSS?

<div> with sloped edge

I have tried adding a separated <div> to create the sloped edge using transform: rotate(); with no luck.

Mainly, what I want to achieve is:

  • Two <div> elements with content
  • The two <div> elements have sloped edges and shadows
Solution

  • The skew transformation can create the slope, but unfortunately it applies to the whole div, not just one edge of it. You can use overlapping or nested divs to mix straight and skewed edges on the same box - however, this makes the shadows a bit problematic (see http://jsfiddle.net/z9am39sp/).

    Another weakness is that with this particular setup, you can't fit the text to the skewed shape.

    Still, it may be close enough for your purposes. Your call.