HTML Page for Intersecting lines with 4 textboxes for MAUI Blazor App

Kalyan A 325 Reputation points
2024-11-14T18:00:26.1866667+00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Angles with Textboxes</title>
<style>
  .container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px auto;
  }
  .line1, .line2 {
    position: absolute;
    width: 2px;
    height: 200px;
    background-color: black;
    top: 0;
    left: 50%;
    transform-origin: top;
  }
  .line1 {
    transform: rotate(45deg); /* First line at 45 degrees */
  }
  .line2 {
    transform: rotate(-45deg); /* Second line at -45 degrees */
  }
  .angle-box {
    position: absolute;
    width: 40px;
    height: 20px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #000;
    background-color: #f9f9f9;
  }
  /* Positioning each angle box */
  .angle1 { top: 10%; left: 10%; }
  .angle2 { top: 10%; right: 10%; }
  .angle3 { bottom: 10%; left: 10%; }
  .angle4 { bottom: 10%; right: 10%; }
  /* Additional styling to show vertical angle relationships */
  .angle-box {
    font-weight: bold;
    color: #333;
  }
</style>
</head>
<body>
<div class="container">
  <div class="line1"></div>
  <div class="line2"></div>
  <!-- Angle Textboxes -->
  <div class="angle-box angle1">∠1</div> <!-- Angle 1 at top left -->
  <div class="angle-box angle2">∠2</div> <!-- Angle 2 at top right -->
  <div class="angle-box angle3">∠3</div> <!-- Angle 3 at bottom left -->
  <div class="angle-box angle4">∠4</div> <!-- Angle 4 at bottom right -->
</div>
</body>
</html>


The above is AI generated html to represent intersecting lines , but I want the angles like the below image.

The lines should form X shape and 4 text boxes can be placed in the V shapes.

vertical

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,622 questions
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,718 questions
0 comments No comments
{count} votes

Accepted answer
  1. Bruce (SqlWork.com) 68,236 Reputation points
    2024-11-14T20:11:57.7433333+00:00

    you create two vertical line, positioned at the top and middle of div. you specified rotate origin at the top rather than the middle.

    the angle box are absolute, so you are placing all based the top left corner of the container. basically the 4 quadrants 1 & 2 are 10% from top and 10% from right and left respective. you probably want to transfer to middle, then offset:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Angles with Textboxes</title>
    <style>
      .container {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 50px auto;
      }
      .line1, .line2 {
        position: absolute;
        width: 2px;
        height: 200px;
        background-color: black;
        top: 0;
        left: 50%;
        transform-origin: center;
      }
      .line1 {
        transform: rotate(45deg); /* First line at 45 degrees */
      }
      .line2 {
        transform: rotate(-45deg); /* Second line at -45 degrees */
      }
      .angle-box {
        position: absolute;
        width: 40px;
        height: 20px;
        text-align: center;
        font-size: 14px;
        border: 1px solid #000;
        background-color: #f9f9f9;
      }
      /* Positioning each angle box (which are twice as wide as high) */
      .angle1 { transform: translate(-50%, -150%) translate(100px, 100px); }
      .angle2 { transform: translate(25%, -50%) translate(100px, 100px); }
      .angle3 { transform: translate(-50%, 50%) translate(100px, 100px);}
      .angle4 { transform: translate(-125%, -50%) translate(100px, 100px);}
      /* Additional styling to show vertical angle relationships */
      .angle-box {
        font-weight: bold;
        color: #333;
      }
    </style>
    </head>
    <body>
    <div class="container">
      
        <div class="line2"></div>
        <div class="line1"></div>
        <!-- Angle Textboxes -->
        <div class="angle-box angle1">∠1</div> <!-- Angle 1 at top left -->
        <div class="angle-box angle2">∠2</div> <!-- Angle 2 at top right -->
        <div class="angle-box angle3">∠3</div> <!-- Angle 3 at bottom left -->
        <div class="angle-box angle4">∠4</div> <!-- Angle 4 at bottom right -->
      </div>
    </body>
    </html>
    

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.