How to draw a line from the middle of the page to the right side?


Tags: javascript,html,css,frontend

Problem :

How to draw a line (using css, html or js) from the middle of the page to the right side?

This should work on a different screen resolutions.

The example provided in the picture.example



Solution :

Maybe like this?

HTML

<div class="line"></div>

CSS

div.line {
    width: 75%;
    height: 1px;
    margin-left: 25%;
    background: red;
}

Demo

Try before buy


    CSS Howto..

    How do I switch external CSS files?

    How to make an anchor fill the height of its containing div

    How could i make CSS apply to all in a div?

    CSS how to make icons look like they are inside the backround

    How to hide text present inside search box?

    How do I vertically center text and have the dark blue bar go across the entire screen

    How to make space between menu items in CSS/HTML

    how to load the content onclik menu?

    How to have only a vertical scroll bar on a div

    How to select via regex all class notations in css file

    How to load CSS filed inside the body in JSP?

    How do I stop the text from moving when hovered? (background-image is involved)

    How to left-align the text in a Bootstrap accordion

    In GWT, how to create a Style object and associate it with a Widget WITHOUT using a CSS file and WITHOUT UiBinder

    How do I center text in a span?

    How to auto resize img group with browser change size?

    Bootstrap, css How to change background

    How to modify programmatically with javascript the css ::before and ::after [duplicate]

    How to move content in ul to the center HTML + CSS

    How to select siblings between 2 tags of same class using CSS

    Understanding how Flexbox works with Bootstrap

    How can I select an nth element without knowing the element in CSS?

    showing element out of scroll area

    How to style a div to be a responsive square? [duplicate]

    How to toggle css visibility with Javascript

    How to reverse the text with js/css? [duplicate]

    How to dynamically apply nested base languages in textarea?

    How to get on a single page different links based on css

    How to implement min left/right in css

    How to make a File Sharing website [closed]