User:Space/Template:DrawLine

This page is currently being developed by one or more editors being led by Space. Please refer to the talk page to learn about and/or contribute to the completion of this page. You can also contact the leader on their discussion page. Talk Page

To-do

• Make a formula for generating a percentage for the transform-origin x value which always places the pivot point of the line at (width/2) in from the short side, i.e. (width/2) pixels in on the symmetry line of the div

{{User:Space/Template:DrawLine|0|0|-100|-100|3|black}}{{User:Space/Template:DrawLine|100|0|0|100|3|pink}}

Usage

{{User:Space/Template:DrawLine|x1|y1|x2|y2|width in px|valid css color code or name}}

Planned to be used for trade lanes in Template:System Map.

Result

{{User:Space/Template:DrawLine|200|200|300|100|3|purple}}{{User:Space/Template:DrawLine|100|0|0|100|3|pink}}{{User:Space/Template:DrawLine|0|100|100|0|3|yellow}}{{User:Space/Template:DrawLine|0|0|100|100|3|#00BFFF}}{{User:Space/Template:DrawLine|0|0|100|-100|3|orange}}{{User:Space/Template:DrawLine|100|-200|400|-1000|3|orange}}{{User:Space/Template:DrawLine|0|0|-100|100|3|green}}{{User:Space/Template:DrawLine|0|0|-100|-100|3|black}}{{User:Space/Template:DrawLine|7000|-10000|800|1300|40|red}} (and a bunch of newlines)

<div style="position:absolute; left:0px; bottom:0px; transform-origin: 4% -50%; transform:rotate(deg); -webkit-transform-origin: 4% -50%; -webkit-transform:(deg); -ms-transform-origin: 4% -50%; -ms-transform:(deg); -moz-transform-origin: 4% -50%; -moz-transform:rotate(deg); -o-transform-origin: 4% -50%; -o-transform:rotate(deg); width: 100px; padding-right: 4%; height: 8px; border-radius: 4px;

background: white;">

<div style="position:absolute; left:100px; bottom:100px; transform-origin: 4% -50%; transform:rotate(deg); -webkit-transform-origin: 4% -50%; -webkit-transform:(deg); -ms-transform-origin: 4% -50%; -ms-transform:(deg); -moz-transform-origin: 4% -50%; -moz-transform:rotate(deg); -o-transform-origin: 4% -50%; -o-transform:rotate(deg); width: 100px; padding-right: 4%; height: 8px; border-radius: 4px;

background: white;">

<div style="position:absolute; left:100px; bottom:100px; transform-origin: 4% -50%; transform:rotate(deg); -webkit-transform-origin: 4% -50%; -webkit-transform:(deg); -ms-transform-origin: 4% -50%; -ms-transform:(deg); -moz-transform-origin: 4% -50%; -moz-transform:rotate(deg); -o-transform-origin: 4% -50%; -o-transform:rotate(deg); width: 100px; padding-right: 4%; height: 8px; border-radius: 4px;

background: white;">

<div style="position:absolute; left:200px; bottom:200px; transform-origin: 4% -50%; transform:rotate(deg); -webkit-transform-origin: 4% -50%; -webkit-transform:(deg); -ms-transform-origin: 4% -50%; -ms-transform:(deg); -moz-transform-origin: 4% -50%; -moz-transform:rotate(deg); -o-transform-origin: 4% -50%; -o-transform:rotate(deg); width: 100px; padding-right: 4%; height: 8px; border-radius: 4px;

background: white;">

<div style="position:absolute; left:50px; bottom:50px; transform-origin: 1.37198868114% -50%; transform:rotate(deg); -webkit-transform-origin: 1.37198868114% -50%; -webkit-transform:(deg); -ms-transform-origin: 1.37198868114% -50%; -ms-transform:(deg); -moz-transform-origin: 1.37198868114% -50%; -moz-transform:rotate(deg); -o-transform-origin: 1.37198868114% -50%; -o-transform:rotate(deg); width: 291.54759474227px; padding-right: 1.37198868114%; height: 8px; border-radius: 4px;

background: red;">

<div style="position:absolute; left:200px; bottom:200px; transform-origin: 1.0606601717798% -50%; transform:rotate(deg); -webkit-transform-origin: 1.0606601717798% -50%; -webkit-transform:(deg); -ms-transform-origin: 1.0606601717798% -50%; -ms-transform:(deg); -moz-transform-origin: 1.0606601717798% -50%; -moz-transform:rotate(deg); -o-transform-origin: 1.0606601717798% -50%; -o-transform:rotate(deg); width: 141.42135623731px; padding-right: 1.0606601717798%; height: 3px; border-radius: 1.5px;

background: purple;">

<div style="position:absolute; left:0px; bottom:0px; transform-origin: 1.0606601717798% -50%; transform:rotate(deg); -webkit-transform-origin: 1.0606601717798% -50%; -webkit-transform:(deg); -ms-transform-origin: 1.0606601717798% -50%; -ms-transform:(deg); -moz-transform-origin: 1.0606601717798% -50%; -moz-transform:rotate(deg); -o-transform-origin: 1.0606601717798% -50%; -o-transform:rotate(deg); width: 141.42135623731px; padding-right: 1.0606601717798%; height: 3px; border-radius: 1.5px;

background: yellow;">

<div style="position:absolute; left:0px; bottom:0px; transform-origin: 1.0606601717798% -50%; transform:rotate(deg); -webkit-transform-origin: 1.0606601717798% -50%; -webkit-transform:(deg); -ms-transform-origin: 1.0606601717798% -50%; -ms-transform:(deg); -moz-transform-origin: 1.0606601717798% -50%; -moz-transform:rotate(deg); -o-transform-origin: 1.0606601717798% -50%; -o-transform:rotate(deg); width: 141.42135623731px; padding-right: 1.0606601717798%; height: 3px; border-radius: 1.5px;

background: green;">

<div style="position:absolute; left:0px; bottom:0px; transform-origin: 1.0606601717798% -50%; transform:rotate(deg); -webkit-transform-origin: 1.0606601717798% -50%; -webkit-transform:(deg); -ms-transform-origin: 1.0606601717798% -50%; -ms-transform:(deg); -moz-transform-origin: 1.0606601717798% -50%; -moz-transform:rotate(deg); -o-transform-origin: 1.0606601717798% -50%; -o-transform:rotate(deg); width: 141.42135623731px; padding-right: 1.0606601717798%; height: 3px; border-radius: 1.5px;

background: #00BFFF;">

<div style="position:absolute; left:0px; bottom:0px; transform-origin: 1.0606601717798% -50%; transform:rotate(deg); -webkit-transform-origin: 1.0606601717798% -50%; -webkit-transform:(deg); -ms-transform-origin: 1.0606601717798% -50%; -ms-transform:(deg); -moz-transform-origin: 1.0606601717798% -50%; -moz-transform:rotate(deg); -o-transform-origin: 1.0606601717798% -50%; -o-transform:rotate(deg); width: 141.42135623731px; padding-right: 1.0606601717798%; height: 3px; border-radius: 1.5px;

background: orange;">

<div style="position:absolute; left:0px; bottom:0px; transform-origin: 1.0606601717798% -50%; transform:rotate(deg); -webkit-transform-origin: 1.0606601717798% -50%; -webkit-transform:(deg); -ms-transform-origin: 1.0606601717798% -50%; -ms-transform:(deg); -moz-transform-origin: 1.0606601717798% -50%; -moz-transform:rotate(deg); -o-transform-origin: 1.0606601717798% -50%; -o-transform:rotate(deg); width: 141.42135623731px; padding-right: 1.0606601717798%; height: 3px; border-radius: 1.5px;

background: black;">

<div style="position:absolute; left:100px; bottom:100px; transform-origin: 0.13155870289606% -50%; transform:rotate(deg); -webkit-transform-origin: 0.13155870289606% -50%; -webkit-transform:(deg); -ms-transform-origin: 0.13155870289606% -50%; -ms-transform:(deg); -moz-transform-origin: 0.13155870289606% -50%; -moz-transform:rotate(deg); -o-transform-origin: 0.13155870289606% -50%; -o-transform:rotate(deg); width: 1140.1754250991px; padding-right: 0.13155870289606%; height: 3px; border-radius: 1.5px;

background: orange;">