Over a million developers have joined DZone.
Platinum Partner

Sometimes You've Just Gotta Draw a Line

· Web Dev Zone

The Web Dev Zone is brought to you by Stormpath—offering a pre-built Identity API for developers. Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management.

 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.


The Web Dev Zone is brought to you by Stormpath—offering a pre-built, streamlined User Management API for building web and mobile applications. Plan On Building User Management? Buy It Instead. Download Our White Paper To Learn More.

Topics:

Published at DZone with permission of Jerry Andrews , DZone MVB .

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}