0

I'd like the content in the in the #content-body-text div to be diagonally aligned against the rectangle which is contained in the div #book4, basically allowing the text in #content-body-text to shrink down in width as we get closer to the bottom.

I'm not really sure what the best approach to do this is. Right now, #book4 is a div with just a background of a diagonal rectangle. I have thought about just doing a background fill on #book4 and then a transform: rotate(xxxdeg) to replace the div's background image, however if I do this I am still not sure how to wrap the #content-body-text around this rotated div.

this screenshot shows what I am trying to do: enter image description here

I have a jsfiddle with my sample layout available here.

I am open to any suggestions on how to do this.

web-tiki
  • 99,765
  • 32
  • 217
  • 249
codechurn
  • 3,870
  • 4
  • 45
  • 65
  • Check out this post: http://sarasoueidan.com/blog/css-shapes/ – whaley Mar 22 '15 at 21:06
  • 2
    HTML elements are rectangles, shaping content is only experimental at the moment. = https://developer.mozilla.org/en-US/docs/Web/CSS/shape – Paulie_D Mar 22 '15 at 21:07

0 Answers0