Creating a line that connects Point A to Point B using HTML, CSS, and JavaScript

Question

Creating a line that connects Point A to Point B using HTML, CSS, and JavaScript

Essentially, I am looking to create a line that connects point A (0vh|0vw) to point B (50vh|50vw).
Initially, I considered using a div with a border and a 1px height that is rotated to achieve the desired effect.

However, the issue arises when the size of the site changes due to an uncommon monitor or window resizing, causing the rotation angle to be incorrect.

Therefore, my goal is to draw a line from a set point A to point B while automatically adjusting the rotation degree as the site is resized.

javascript html css

Answer 1

Answer №1

Using an SVG, as suggested by manassehkatz, can be a great solution.

<svg width="100%" height="100%" style="position:absolute;top:0;left:0;">
  <line x1="0" y1="0" x2="50vw" y2="50vh" style="stroke:red;stroke-width:2" />
</svg>

An alternative option is to utilize a canvas, but this method will require custom resizing and rendering.

const ctx = document.getElementById('line-drawing').getContext('2d');

function update() {
  Object.assign(ctx.canvas, {
    width: window.innerWidth,
    height: window.innerHeight,
  });
}

function render() {
  const { width, height } = ctx.canvas;
  ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(~~(width / 2), ~~(height / 2));
  ctx.lineWidth = 2;
  ctx.strokeStyle = 'red';
  ctx.stroke();
}

update();
render();

window.addEventListener('resize', () => {
  update();
  render();
});

#line-drawing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<canvas id="line-drawing"></canvas>

Answer 2

Using an SVG, as suggested by manassehkatz, can be a great solution.

<svg width="100%" height="100%" style="position:absolute;top:0;left:0;">
  <line x1="0" y1="0" x2="50vw" y2="50vh" style="stroke:red;stroke-width:2" />
</svg>

An alternative option is to utilize a canvas, but this method will require custom resizing and rendering.

const ctx = document.getElementById('line-drawing').getContext('2d');

function update() {
  Object.assign(ctx.canvas, {
    width: window.innerWidth,
    height: window.innerHeight,
  });
}

function render() {
  const { width, height } = ctx.canvas;
  ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(~~(width / 2), ~~(height / 2));
  ctx.lineWidth = 2;
  ctx.strokeStyle = 'red';
  ctx.stroke();
}

update();
render();

window.addEventListener('resize', () => {
  update();
  render();
});

#line-drawing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<canvas id="line-drawing"></canvas>

Answer 3

Answer №2

An easy method to achieve this effect using CSS is by creating a clipped div that covers the entire viewport.

Take a look at the following code snippet for reference:

<style>
  .stripe {
    width: 100vw;
    height: 100vh;
    background: blue;
    position: fixed;
    clip-path: polygon(0% 0%, 20% 0%, 50% 50%, 80% 100%, 100% 100%, 100% 0%);
  }
</style>
<div class="stripe"></div>

Answer 4

An easy method to achieve this effect using CSS is by creating a clipped div that covers the entire viewport.

Take a look at the following code snippet for reference:

<style>
  .stripe {
    width: 100vw;
    height: 100vh;
    background: blue;
    position: fixed;
    clip-path: polygon(0% 0%, 20% 0%, 50% 50%, 80% 100%, 100% 100%, 100% 0%);
  }
</style>
<div class="stripe"></div>

Answer 5

Answer №3

In my opinion, opting for an hr instead of a div (as it essentially functions as a rotated horizontal rule) would be a better choice. Nevertheless, achieving this using CSS is definitely possible. It does require some functionalities that, currently, only function in Safari and Firefox: the CSS sqrt() and atan2 functions.

We can define the width of our hr to match the hypotenuse of your triangle, and apply rotation using atan2 (for further insights on this unique function, refer to its wikipedia article. Its significance reaches to the extent of being directly integrated into CPUs as a fundamental machine instruction) to determine an angle based on distance and rise:

main {
  --w: 200;
  --h: 100;
  width: calc(1px * var(--w));
  height: calc(1px * var(--h));
  background: red;
}

.line {
  padding: 0;
  margin: 0;
  height: 0px;
  border: 0.5px solid black;
  transform-origin: 0 0;

  /* line from (0,0) to (50% width, 50% height): */
  --lw: calc(var(--w) / 2);
  --lh: calc(var(--h) / 2);

  /* calculate our hypotenuse length and angle: */
  --m: calc(pow(var(--lw), 2) + pow(var(--lh), 2));
  --hyp: sqrt(var(--m));
  width: calc(1px * var(--hyp));

  --angle: atan2(var(--lh), var(--lw));
  transform: rotate(var(--angle));
}

<main>
  <hr class="line"/>
</main>

Naturally, resorting to SVG would offer a much simpler solution with improved compatibility =D

Answer 6

In my opinion, opting for an hr instead of a div (as it essentially functions as a rotated horizontal rule) would be a better choice. Nevertheless, achieving this using CSS is definitely possible. It does require some functionalities that, currently, only function in Safari and Firefox: the CSS sqrt() and atan2 functions.

We can define the width of our hr to match the hypotenuse of your triangle, and apply rotation using atan2 (for further insights on this unique function, refer to its wikipedia article. Its significance reaches to the extent of being directly integrated into CPUs as a fundamental machine instruction) to determine an angle based on distance and rise:

main {
  --w: 200;
  --h: 100;
  width: calc(1px * var(--w));
  height: calc(1px * var(--h));
  background: red;
}

.line {
  padding: 0;
  margin: 0;
  height: 0px;
  border: 0.5px solid black;
  transform-origin: 0 0;

  /* line from (0,0) to (50% width, 50% height): */
  --lw: calc(var(--w) / 2);
  --lh: calc(var(--h) / 2);

  /* calculate our hypotenuse length and angle: */
  --m: calc(pow(var(--lw), 2) + pow(var(--lh), 2));
  --hyp: sqrt(var(--m));
  width: calc(1px * var(--hyp));

  --angle: atan2(var(--lh), var(--lw));
  transform: rotate(var(--angle));
}

<main>
  <hr class="line"/>
</main>

Naturally, resorting to SVG would offer a much simpler solution with improved compatibility =D

Answer 7

Answer №4

Experiment with setting the body to 100vh and 100vw, then use only px units inside for better adaptability of the screen size without affecting the stick's dimensions.

Answer 8

Experiment with setting the body to 100vh and 100vw, then use only px units inside for better adaptability of the screen size without affecting the stick's dimensions.

Creating a line that connects Point A to Point B using HTML, CSS, and JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Determine the index of a specific character within a string using a "for of" loop

AngularJS: Creating a unique directive for verifying the availability of a username - no duplicates allowed

What could be causing the Gruntfile to throw an error?

What is the most effective method for serializing SVG data from the client's Document Object Model (DOM

Separation between inline elements with a line break

Creating an object with an array of objects as a field in MongoDB: A step-by-step guide

Choose links in the div and apply "motion effects."

Eliminating the gray background using CSS

When an element possesses a particular class, modify the css styling of a different

What is the best way to prevent elements in the split function from being stored in an array?

Different methods for incorporating script-specific data into markup

Utilizing Ionic Storage to set default request headers through an HTTP interceptor in an Angular 5 and Ionic 3 application

Having trouble incorporating custom CSS into my Rails/Bootstrap project

Notification Click Event for PWA Service Worker

Scaling down a retina image sprite using CSS: A step-by-step guide

Having trouble troubleshooting the jQuery button

Creating a method in Angular that combines async/await functionality with Observables

What is the best way to show an HTML file in a WebBrowser using C++?

Mysterious JQuery attribute

Why is TypeScript unable to recognize package exports? (using CommonJS as the module system and Node as the module resolution)