How to Connect Two divs with lines in Angular
<div style="position:absolute; left:0; top:0; width: 100px; height: 50px; background:red;"></div>
<div style="position:absolute; left:250px; top:150px; width: 100px; height: 50px; background: blue;"></div>
<svg style="position:absolute; left:0; top:0;" width="300" height="300">
<line x1="100" y1="50" x2="250" y2="150" stroke="black"/>
</svg>Draw Connector Lines between Divs?
Here is an idea with pseudo element.
Relevant code:
.split-one ul.matchup:nth-child(odd)::after,
.split-one ul.matchup:nth-child(even)::after,
.split-two ul.matchup:nth-child(odd)::after,
.split-two ul.matchup:nth-child(even)::after{
content: "";
position: absolute;
left: calc(100% + 5px);
top: 0;
bottom: 50%;
width:4px;
border-left: 2px solid red;
border-top:2px solid red;
}
.split-two ul.matchup:nth-child(odd)::after,
.split-two ul.matchup:nth-child(even)::after {
right:calc(100% + 5px);
left:auto;
border-right: 2px solid red;
border-left:0;
}
.split-one ul.matchup:nth-child(even)::after,
.split-two ul.matchup:nth-child(even)::after{
top: 50%;
bottom: 0%;
border-bottom:2px solid red;
border-top:0;
}
.matchup {
position: relative;
}
Full code
body {font-family: 'Istok Web', sans-serif;background: url("http://picjumbo.com/wp-content/uploads/HNCK2189-1300x866.jpg") no-repeat #000;background-size: cover;min-height: 100%;margin: 0;}.hero {position:relative; text-align: center; overflow: hidden; color: #fcfcfc; }.hero h1 {font-family: 'Holtwood One SC', serif;font-weight: normal;font-size: 5.4em;margin:0 0 20px; text-shadow:0 0 12px rgba(0, 0, 0, 0.5);text-transform: uppercase;letter-spacing:-1px;}.hero p {font-family: 'Abel', sans-serif;text-transform: uppercase; color: #5CCA87; letter-spacing: 6px;text-shadow:0 0 12px rgba(0, 0, 0, 0.5);font-size: 1.2em;}.hero-wrap {padding: 3.5em 10px;}.hero p.intro {font-family: 'Holtwood One SC', serif;text-transform: uppercase;letter-spacing: 1px;font-size: 3em;margin-bottom:-40px;}.hero p.year {color: #fff; letter-spacing: 20px; font-size: 34px; margin: -25px 0 25px;}.hero p.year i {font-size: 14px;vertical-align: middle;}#bracket {overflow:hidden;background-color: #e1e1e1;background-color:rgba(225,225,225,0.9);padding-top: 20px;font-size: 12px;padding: 40px 0;}.container {max-width: 1100px;margin: 0 auto;display:block;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: -webkit-flex;display: flex;-webkit-flex-direction:row;flex-direction: row;}.split {display:block;float:left;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display:flex;width: 42%;-webkit-flex-direction:row;-moz-flex-direction:row;flex-direction:row;}.champion {float:left;display:block;width: 16%;-webkit-flex-direction:row;flex-direction:row;-webkit-align-self:center;align-self:center;margin-top: -15px;text-align: center;padding: 230px 0\9;} .champion i {color: #a0a6a8; font-size: 45px;padding: 10px 0; }.round {display:block;float:left;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;width:95%;width:30.8333%\9;}.split-two {}.split-one .round {margin: 0 2.5% 0 0;}.split-two .round {margin: 0 0 0 2.5%;}.matchup {margin:0;width: 100%;padding: 10px 0;height:60px;-webkit-transition: all 0.2s;transition: all 0.2s;}.score {font-size: 11px;text-transform: uppercase;float: right;color: #2C7399;font-weight: bold;font-family: 'Roboto Condensed', sans-serif;position: absolute;right: 5px;}.team {padding: 0 5px;margin: 3px 0;height: 25px; line-height: 25px;white-space: nowrap; overflow: hidden;position: relative;}.round-two .matchup {margin:0; height: 60px;padding: 50px 0;}.round-three .matchup {margin:0; height: 60px; padding: 130px 0;}.round-details {font-family: 'Roboto Condensed', sans-serif; font-size: 13px; color: #2C7399;text-transform: uppercase;text-align: center;height: 40px;}.champion li, .round li {background-color: #fff;box-shadow: none; opacity: 0.45;}.current li {opacity: 1;}.current li.team {background-color: #fff;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);opacity: 1;}.vote-options {display: block;height: 52px;}.share .container {margin: 0 auto; text-align: center;}.share-icon {font-size: 24px; color: #fff;padding: 25px;}.share-wrap {max-width: 1100px; text-align: center; margin: 60px auto;}.final {margin: 4.5em 0;}
@-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); }
50% { -webkit-transform: scale(1.3); transform: scale(1.3); }
100% { -webkit-transform: scale(1); transform: scale(1); }}
@keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
50% { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }
100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }}
.share-icon {color: #fff; opacity: 0.35; }.share-icon:hover { opacity:1; -webkit-animation: pulse 0.5s; animation: pulse 0.5s;}.date {font-size: 10px; letter-spacing: 2px;font-family: 'Istok Web', sans-serif;color:#3F915F;}
@media screen and (min-width: 981px) and (max-width: 1099px) { .container {margin: 0 1%;} .champion {width: 14%;} .split {width:43%; } .split-one .vote-box {margin-left: 138px;} .hero p.intro {font-size: 28px;} .hero p.year {margin: 5px 0 10px;}
}
@media screen and (max-width: 980px) { .container {-webkit-flex-direction:column;-moz-flex-direction:column;flex-direction:column;} .split, .champion {width: 90%;margin: 35px 5%;} .champion {-webkit-box-ordinal-group:3;-moz-box-ordinal-group:3;-ms-flex-order:3;-webkit-order:3;order:3;} .split {border-bottom: 1px solid #b6b6b6; padding-bottom: 20px;} .hero p.intro {font-size: 24px;} .hero h1 {font-size: 3em; margin: 15px 0;} .hero p {font-size: 1em;}}
@media screen and (max-width: 400px) {
.split {width: 95%;margin: 25px 2.5%;} .round {width:21%;} .current {-webkit-flex-grow:1;-moz-flex-grow:1;flex-grow:1;} .hero h1 {font-size: 2.15em; letter-spacing: 0;margin:0; } .hero p.intro {font-size: 1.15em;margin-bottom: -10px;} .round-details {font-size: 90%;} .hero-wrap {padding: 2.5em;} .hero p.year {margin: 5px 0 10px; font-size: 18px;}
}
.split-one ul.matchup:nth-child(odd)::after,.split-one ul.matchup:nth-child(even)::after,.split-two ul.matchup:nth-child(odd)::after,.split-two ul.matchup:nth-child(even)::after{ content: ""; position: absolute; left: calc(100% + 5px); top: 0; border-left: 2px solid red; width:4px; border-top:2px solid red; bottom: 50%;}.split-two ul.matchup:nth-child(odd)::after,.split-two ul.matchup:nth-child(even)::after { right:calc(100% + 5px); left:auto; border-right: 2px solid red; border-left:0;}
.split-one ul.matchup:nth-child(even)::after,.split-two ul.matchup:nth-child(even)::after{ top: 50%; bottom: 0%; border-bottom:2px solid red; border-top:0;}.matchup { position: relative;}<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Holtwood+One+SC' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Kaushan+Script|Herr+Von+Muellerhoff' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Istok+Web|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
<title>March Madness Stock Matchup</title></head><body> <header class="hero"> <div class="hero-wrap"> <p class="intro" id="intro">flexbox</p> <h1 id="headline">Tournament</h1> <p class="year"><i class="fa fa-star"></i> 2015 <i class="fa fa-star"></i></p> <p>Ballin' Outta Control</p> </div> </header>
<section id="bracket"> <div class="container"> <div class="split split-one"> <div class="round round-one current"> <div class="round-details">Round 1<br/><span class="date">March 16</span></div> <ul class="matchup"> <li class="team team-top">Duke<span class="score">76</span></li> <li class="team team-bottom">Virginia<span class="score">82</span></li> </ul> <ul class="matchup"> <li class="team team-top">Wake Forest<span class="score">64</span></li> <li class="team team-bottom">Clemson<span class="score">56</span></li> </ul> <ul class="matchup"> <li class="team team-top">North Carolina<span class="score">68</span></li> <li class="team team-bottom">Florida State<span class="score">54</span></li> </ul> <ul class="matchup"> <li class="team team-top">NC State<span class="score">74</span></li> <li class="team team-bottom">Maryland<span class="score">92</span></li> </ul> <ul class="matchup"> <li class="team team-top">Georgia Tech<span class="score">78</span></li> <li class="team team-bottom">Georgia<span class="score">80</span></li> </ul> <ul class="matchup"> <li class="team team-top">Auburn<span class="score">64</span></li> <li class="team team-bottom">Florida<span class="score">63</span></li> </ul> <ul class="matchup"> <li class="team team-top">Kentucky<span class="score">70</span></li> <li class="team team-bottom">Alabama<span class="score">59</span></li> </ul> <ul class="matchup"> <li class="team team-top">Vanderbilt<span class="score">64</span></li> <li class="team team-bottom">Gonzaga<span class="score">68</span></li> </ul> </div> <!-- END ROUND ONE -->
<div class="round round-two"> <div class="round-details">Round 2<br/><span class="date">March 18</span></div> <ul class="matchup"> <li class="team team-top"> <span class="score"> </span></li> <li class="team team-bottom"> <span class="score"> </span></li> </ul> <ul class="matchup"> <li class="team team-top"> <span class="score"> </span></li> <li class="team team-bottom"> <span class="score"> </span></li> </ul> <ul class="matchup"> <li class="team team-top"> <span class="score"> </span></li> <li class="team team-bottom"> <span class="score"> </span></li> </ul> <ul class="matchup"> <li class="team team-top"> <span class="score"> </span></li> <li class="team team-bottom"> <span class="score"> </span></li> </ul> </div> <!-- END ROUND TWO --> <div class="round round-three"> <div class="round-details">Round 3<br/><span class="date">March 22</span></div> <ul class="matchup"> <li class="team team-top"> <span class="score"> </span></li> <li class="team team-bottom"> <span class="score"> </span></li> </ul> <ul class="matchup"> <li class="team team-top"> <span class="score"> </span></li> <li class="team team-bottom"> <span class="score"> </span></li> </ul> </div> <!-- END ROUND THREE --> </div>
<div class="champion"> <div class="semis-l"> <div class="round-details">west semifinals <br/><span class="date">March 26-28</span></div> <ul class ="matchup championship"> <li class="team team-top"> <span class="vote-count"> </span></li> <li class="team team-bottom"> <span class="vote-count"> </span></li> </ul> </div> <div class="final"> <i class="fa fa-trophy"></i> <div class="round-details">championship <br/><span class="date">March 30 - Apr. 1</span></div> <ul class ="matchup championship"> <li class="team team-top"> <span class="vote-count"> </span></li> <li class="team team-bottom"> <span class="vote-count"> </span></li> </ul> </div> <div class="semis-r"> <div class="round-details">east semifinals <br/><span class="date">March 26-28</span></div> <ul class ="matchup championship"> <li class="team team-top"> <span class="vote-count"> </span></li> <li class="team team-bottom"> <span class="vote-count"> </span></li> </ul> </div> </div>
<div class="split split-two">
<div class="round round-three"> <div class="round-details">Round 3<br/><span class="date">March 22</span></div> <ul class="matchup"> <li class="team team-top"> <span class="score"> </span></li> <li class="team team-bottom"> <span class="score"> </span></li> </ul> <ul class="matchup"> <li class="team team-top"> <span class="score"> </span></li> <li class="team team-bottom"> <span class="score"> </span></li> </ul> </div> <!-- END ROUND THREE -->
<div class="round round-two"> <div class="round-details">Round 2<br/><span class="date">March 18</span></div> <ul class="matchup"> <li class="team team-top"> <span class="score"> </span></li> <li class="team team-bottom"> <span class="score"> </span></li> </ul> <ul class="matchup"> <li class="team team-top"> <span class="score"> </span></li> <li class="team team-bottom"> <span class="score"> </span></li> </ul> <ul class="matchup"> <li class="team team-top"> <span class="score"> </span></li> <li class="team team-bottom"> <span class="score"> </span></li> </ul> <ul class="matchup"> <li class="team team-top"> <span class="score"> </span></li> <li class="team team-bottom"> <span class="score"> </span></li> </ul> </div> <!-- END ROUND TWO --> <div class="round round-one current"> <div class="round-details">Round 1<br/><span class="date">March 16</span></div> <ul class="matchup"> <li class="team team-top">Minnesota<span class="score">62</span></li> <li class="team team-bottom">Northwestern<span class="score">54</span></li> </ul> <ul class="matchup"> <li class="team team-top">Michigan<span class="score">68</span></li> <li class="team team-bottom">Iowa<span class="score">66</span></li> </ul> <ul class="matchup"> <li class="team team-top">Illinois<span class="score">64</span></li> <li class="team team-bottom">Wisconsin<span class="score">56</span></li> </ul> <ul class="matchup"> <li class="team team-top">Purdue<span class="score">36</span></li> <li class="team team-bottom">Boise State<span class="score">40</span></li> </ul> <ul class="matchup"> <li class="team team-top">Penn State<span class="score">38</span></li> <li class="team team-bottom">Indiana<span class="score">44</span></li> </ul> <ul class="matchup"> <li class="team team-top">Ohio State<span class="score">52</span></li> <li class="team team-bottom">VCU<span class="score">80</span></li> </ul> <ul class="matchup"> <li class="team team-top">USC<span class="score">58</span></li> <li class="team team-bottom">Cal<span class="score">59</span></li> </ul> <ul class="matchup"> <li class="team team-top">Virginia Tech<span class="score">74</span></li> <li class="team team-bottom">Dartmouth<span class="score">111</span></li> </ul> </div> <!-- END ROUND ONE --> </div> </div> </section> <section class="share"> <div class="share-wrap"> <a class="share-icon" href="https://twitter.com/_joebeason"><i class="fa fa-twitter"></i></a> <a class="share-icon" href="#"><i class="fa fa-facebook"></i></a> <a class="share-icon" href="#"><i class="fa fa-envelope"></i></a> </div> </section>Drawing a line between html div elements
An svg element has a size, and your line is outside of the that area.
The default setting for an svg is:
svg:not(:root) {
overflow: hidden;
}
so your line won't be visible.
If you add this to your style:
svg {
overflow: visible;
border: 1px solid red;
}
You will see where your svg is located and its dimension, and overflow: visible; makes the line visible:
const circle1 = document.querySelector('.circle--1');
const circle2 = document.querySelector('.circle--2');
const line1 = document.querySelector('#line-1');
line1.setAttribute('x1', circle1.getBoundingClientRect().x);
line1.setAttribute('y1', circle1.getBoundingClientRect().y);
line1.setAttribute('x2', circle2.getBoundingClientRect().x);
line1.setAttribute('y2', circle2.getBoundingClientRect().y);*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient(to right, #64b5f6, #1976d2);
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: grey;
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle--2 {
right: 10%;
bottom: 60%;
}
svg {
overflow: visible;
border: 1px solid red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle circle--1">1</div>
<div class="circle circle--2">2</div>
<svg>
<line
id="line-1"
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>
</header>
<script src="./script.js"></script>
</body>
</html>Draw a connecting line between two elements
jsPlumb is an option available that supports drag and drop, as seen by its numerous demos, including the Flowchart demo.
It is available in a free Community edition and a paid Toolkit edition.
The Toolkit edition wraps the Community edition with a comprehensive data binding layer, as well as several UI widgets for building applications and integrations for popular libraries, and is commercially licensed.
How to connect a horizontal/vertical line between two divs?
You can create a div with a class of something like connector and style this to look like the connector with the following CSS:
.connector {
border: 6px solid #333;
border-right: 0;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
height:50px;
width: 10px;
}
You can change the appearance of this by playing around with the border thickness, colour and border-radius. This takes care of the styling.
To position it correctly, you can use absolute or relative positioning. In this case to use absolute positioning, apply position:absoluteto the connector class. To position it use properties such as top, bottom, left and right. The absolute position will absolutely position the element relative to the entire page so I'd recommend adding position:relative to its parent container so it is positioned relative to this.
.container{ height:800px; width:100%; padding:50px;background:#eeeeee; position:relative; }
.box-1{ height:300px; width:300px; background:blue; color:#fff; margin-bottom:30px; }
.box-2{ height:300px; width:300px; background:red; color:#fff; }
.connector { position:absolute; top: 335px; left: 35px; border: 6px solid #333; border-right: 0; border-top-left-radius: 8px; border-bottom-left-radius: 8px; height:50px; width: 10px;}<div class="container">
<div class="box-1"> Box 1 </div> <div class="box-2"> Box 2 </div> <div class="connector"></div>
</div>Draw a line in a div
Its working for me
.line{width: 112px;height: 47px;border-bottom: 1px solid black;position: absolute;}<div class="line"></div>Related Topics
How to Convert a Dom Node List to an Array in JavaScript
Get Json Data from External Url and Display It in a Div as Plain Text
Setting Background-Image Using Jquery CSS Property
Does .Css() Automatically Add Vendor Prefixes
JavaScript File Per View in Rails
Sort Array of Objects by String Property Value
What Is JavaScript'S Highest Integer Value That a Number Can Go to Without Losing Precision
How to Draw an Oval in Html5 Canvas
How to Automatically Reload a Web Page At a Certain Time
Stop an Input Field in a Form from Being Submitted
How to Simulate a Mouseover in Pure JavaScript That Activates the CSS ":Hover"
How to Pause and Resume Css3 Animation Using JavaScript
How to Reload CSS Without Reloading the Page
Find the Longest Common Starting Substring in a Set of Strings