Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Sometimes You've Just Gotta Draw a Line

DZone's Guide to

Sometimes You've Just Gotta Draw a Line

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

 I needed a short line in my HTML UI.  Turns out, you can do it with CSS. Here's the code that draws the specific line I needed:

<div
  style="height: 14px;
  color:white; background:white;
  position:absolute; left:77px; top:8px;
  transform:rotate(27deg);
  -ms-transform:rotate(27deg); /* IE 9 */
  -webkit-transform:rotate(27deg); /* Safari and Chrome */
  width:1px"/>
And here's a general-purpose kit for drawing lines a lot, which provided the clues I needed:

http://monkeyandcrow.com/blog/drawing_lines_with_css3/

So now you know.


Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}