Align text on slanted line

by

Using LESS

You guys made me think a bit more outside of the box, so I came out with my own ugly solution.
My idea is to add a bunch of extra square elements and calculate its size:

.loop(@i) when (@i > 0){
  .loop((@i - 1));
  .space@{i}{
    width: floor(@i*@hSize/(1/tan(5deg)));
  }
}
@hSize: 15px;
.space {
  float: left;
  clear: left;
  width: @hSize;
  height: @hSize;
}

HTML:

<p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.
</p>

Proof of concept: http://codepen.io/Tymek/pen/jEypOX?editors=110

@chipChocolate.py, it was just a matter of principle for me NOT to use JavaScript for this. If anyone wants to write JS/jQuery code based on my solution, you’re welcome. Please share it here afterwards.

More Related Contents:

  1. How do CSS triangles work?
  2. Speech bubble with arrow
  3. Line before and after title over image [duplicate]
  4. Transparent text cut out of background
  5. CSS Only Pie Chart – How to add spacing/padding between slices?
  6. Control the dashed border stroke length and distance between strokes
  7. CSS transparent curved shape with two rounded sides
  8. How to draw a circle with text in the middle?
  9. CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”
  10. Is it possible to create an angled corner in CSS?
  11. How to draw a circle sector in CSS?
  12. draw diagonal lines in div background with CSS
  13. Outlining and partially filling an SVG Shape
  14. Hexagon shape with CSS3
  15. Is a concave border radius possible?
  16. background image, linear gradient jagged edged result needs to be smooth edged
  17. How to make a circle around content using CSS?
  18. Adjacent divs with angled borders? [duplicate]
  19. Blocky gradient effect in CSS3
  20. Border within border CSS
  21. Half hexagon shape with one element
  22. How to create a radial menu in CSS?
  23. Arrow Box with CSS
  24. Transparent hollow or cut out shape in HTML
  25. Make CSS3 triangle with linear gradient
  26. Creating an Isoceles Trapezoid shape
  27. Make table cells square
  28. Creating a droplet like border effect in css
  29. Div with cut out edges, border and transparent background
  30. Double curved shape

Leave a Comment