Draw a curve with css
You could use an asymmetrical border to make curves with CSS.
border-radius: 50%/100px 100px 0 0;
VIEW DEMO
.box { width: 500px; height: 100px; border: solid 5px #000; border-color: #000 transparent transparent transparent; border-radius: 50%/100px 100px 0 0;}<div class="box"></div>How to create curved line with rounded edges?
You may add two background layers to create the circles at the edges like below:
.line { --c:20px; /* control the size */ width: 100px; margin-top:-100px; display:inline-block; box-sizing:border-box; border: solid var(--c) transparent; border-radius:50%; border-bottom-color:red; background: radial-gradient(farthest-side,red 98%,transparent) left 15% bottom 14%, radial-gradient(farthest-side,red 98%,transparent) right 15% bottom 14%; background-size:var(--c) var(--c); background-origin:border-box; background-repeat:no-repeat;}
/* maintain the square ratio */.line::before { content:""; display:block; padding-top:100%;}<div class="line"></div><div class="line" style="--c:30px;width:200px"></div><div class="line" style="--c:40px;width:120px"></div><div class="line" style="--c:10px;width:150px"></div>Creating Diagonal Curved Line with CSS
you can create a full circle inside of a div with ::before and hide half of it with overflow hidden like this
.bottom-circle {
width: 400px;
height: 50px;
position:relative;
overflow:hidden;
margin: 0 auto;
}
.bottom-circle:before{
content:'';
position:absolute;
top:-300px;
left:0;
width:400px;
height:400px;
border-radius:100%;
border: 2px dashed #c6c6c6;
box-sizing:border-box
}<div class="bottom-circle">
</div>How do I create curved lines in css without using an image
You can do it with SVG or with border.
Here is a demo with border.
HTML
<div class="curve"></div>
CSS
.curve {
width: 500px;
height: 100px;
border: solid 5px #000; border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}
MDN for more about border parameters
need to make curve line using css
Try this:
.wave { width: 800px; height: 200px; position: relative;}
.wave:after { content: ''; width: 50%; position: absolute; height: 200px; display: block; border-bottom: 19px solid black; border-radius: 50%; left: 50%;}
.wave:before { content: ''; width: 50%; position: absolute; height: 200px; display: block; border-top: 19px solid black; border-radius: 50%;}<div class="wave"> </div>How can I make a curve line to join two node in HTML and CSS?
The browser's ability to display SVGs - and create 'em on the fly - can come in handy in this case. This way you don't have to manually hardcode the lines into the html - you just tell the browser what element's it should connect.
Basically you add an empty HTML <svg> element into the body and make sure it's in the background of the objects you want to connect. This can be done by e.g. setting it's CSS z-index property to a negative value.
Afterwards:
- figure out the screen coordinates of the two objects you want to connect
- create a svg
<path>element, which connects the two coordinates with a line/curve - append that path to the svg
The hard part with this solution though is getting your actual objects! If we take a closer look at your html, we realize you put all labeling of the objects inside <span> elements. That's great because we can simply use
document.getElementsByTagName("span")
to get a HTMLCollection of all the span elements on your site. If we now go further, inspect the .innerText property of the elements inside this collection and compare it to one of the object's textes e.g. W_SCMadl_refresh we can get a reference to the actual object. Unfortunately we aren't really interested in the span element itself since you want to connect the lines with one of it's parent's child DIVs.
Let's inspect those child elements. We can see those are all DIVs again which have a CSS class of indicator mv-cmd-done, indicator mv-cmd-aborted, ...
So to actually get one of those elements we need to search the parent containers children's classNames for the presence of the string indicator like:
element.className.indexOf("indicator") != -1
The only element in your hierachy that ain't got such an element is the top-most Command Sequence Starting - so we need to include an exception.
Everything put together looks a little bit like this (just click on 'Run code snippet'):
let paths = document.getElementById("paths");
let connections2 = [];
function getElement(element) {
for (let a = 0; a < element.length; a++) {
if (element[a].className.indexOf("indicator") != -1) {
return element[a];
}
}
return null;
}
function connectElements(connections) {
let spans = document.getElementsByTagName("span");
let start;
let end;
let temp;
for (let a = 0; a < connections.length; a += 2) {
for (let b = 0; b < spans.length; b++) {
if (spans[b].innerText == connections[a]) {
start = getElement(spans[b].parentElement.children);
}
if (spans[b].innerText == connections[a + 1]) {
if (connections[a + 1] == "Command Sequence Starting") {
end = spans[b];
} else {
end = getElement(spans[b].parentElement.children);
}
}
}
connections2.push({
start: start,
end: end
});
}
coordinates();
}
function coordinates() {
let padding = 5;
let bezierWeight = 0.5;
let oldPaths = paths.children;
for (let a = oldPaths.length - 1; a >= 0; a--) {
paths.removeChild(oldPaths[a]);
}
let x1, y1, x4, y4, dx, x2, x3, path, start, end;
for (let a = 0; a < connections2.length; a++) {
start = $(connections2[a].start);
end = $(connections2[a].end);
x1 = start.offset().left + start.width() / 2 - padding;
y1 = start.offset().top + start.height() / 2 - padding;
x4 = end.offset().left + start.width() / 2 - padding;
y4 = end.offset().top + start.height() / 2 - padding;
dx = Math.abs(x4 - x1) * bezierWeight;
if (x4 < x1) {
x2 = x1 - dx;
x3 = x4 + dx;
} else {
x2 = x1 + dx;
x3 = x4 - dx;
}
data = `M${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", data);
path.setAttribute("class", "path");
paths.appendChild(path);
}
}
connectElements(["W_SCMadl_refresh", "Command Sequence Starting", "WIN64_MCCMon", "Command Sequence Starting", "W64_mkCopyPreq", "WIN64_MCCMon"]);#paths {
z-index: -1;
position: absolute;
}
.path {
fill: none;
stroke: #3ed21b;
stroke-width: 6;
}
.mv-thread,
.mv-sequence {
display: inline-block;
}
.mv-sequence,
.mv-subsequence {
border: solid 1px #e0e0e0;
border-radius: 15px;
margin: 85px;
padding: 10px;
text-align: center;
}
.mv-sequence>.title,
.mv-subsequence>.title {
font-size: 17px;
background-color: cadetblue;
border-radius: 7px 0px;
color: #fff;
font-weight: bold;
padding: 10px;
}
.mv-sequence>.body,
.mv-subsequence>.body {
min-width: max-content;
display: inline-block;
text-align: left;
}
.mv-command>div.indicator {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 32px;
text-align: center;
font-size: 17px;
}
.mv-command>span {
font-size: 13px;
font-weight: bold;
}
.mv-command:before {
content: "";
background-color: #000;
width: 3px;
height: 16px;
display: block;
margin-left: 14px;
}
/* for done*/
.mv-command.done:before {
background: #477738;
}
.mv-cmd-done {
background: #57b847;
}
.mv-cmd-done>a>span,
.mv-command.done>span {
color: #477738;
}
/* for aborted*/
.mv-command.aborted:before {
background: #844138;
}
.mv-cmd-aborted {
background: #ea4f37;
}
.mv-cmd-aborted>a>span,
.mv-command.aborted>span {
color: #844138;
}
/* for waiting*/
.mv-command.waiting:before {
background-color: #808080;
}
.mv-cmd-waiting {
background: #f1f1f1;
}
.mv-cmd-waiting>span,
.mv-command.waiting>span {
color: #808080;
}
/* for disabled*/
.mv-command.disabled:before {
background: #80808080;
}
.mv-cmd-disabled {
border: 1px solid #80808080;
}
.mv-cmd-disabled>span,
.mv-command.disabled>span {
color: #80808080;
}
/* for running */
.mv-command.running:before {
background: #005686;
}
.mv-cmd-running {
border: 1px solid #005686;
}
.mv-cmd-running>a>span {
color: #80808080;
animation: mymove 2s infinite;
}
@keyframes mymove {
from {
color: #fff;
}
to {
color: #368ec4;
}
}
.mv-command.running>span {
color: #80808080;
animation: mymove 2s infinite;
}<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<svg height="1000" width="1000" id="paths">
</svg>
<div>
<div class="mv-sequence">
<div class="body">
<div class="mv-thread">
<table style="width:100%">
<span class="mv-sequence" style="background-color: green; color: aliceblue;">Command Sequence Starting</span>
<tbody>
<tr>
<td style="vertical-align: top;">
<div>
<div class="body">
<div>
<div class="body">
<div class="mv-command done">
<span style="display:none" class="cmd-text">[ScmRefresh]</span>
<div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-40" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_SCMadl_refresh.xml"><span
class="fonticon fonticon-check"></span></a></div>
<span>W_SCMadl_refresh</span>
</div>
<div class="mv-command done">
<span style="display:none" class="cmd-text">adl_photo</span>
<div data-state="Done" data-start="2020-10-22_18-14-40" data-end="2020-10-22_18-14-41" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_photo.xml"><span
class="fonticon fonticon-check"></span></a></div>
<span>W_adl_photo</span>
</div>
<div class="mv-command done">
<span style="display:none" class="cmd-text">code:[ScmCollect]
-cr_later</span>
<div data-state="Done" data-start="2020-10-22_18-14-42" data-end="2020-10-22_18-14-43" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect.xml"><span
class="fonticon fonticon-check"></span></a></div>
<span>W_adl_collect</span>
</div>
<div class="mv-command done">
<span style="display:none" class="cmd-text">adl_collect_cr</span>
<div data-state="Done" data-start="2020-10-22_18-14-43" data-end="2020-10-22_18-14-44" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-done"><a href="Main/MainThread/Release/Windows_SCM/W_adl_collect_cr.xml"><span
class="fonticon fonticon-check"></span></a></div>
<span>W_adl_collect_cr</span>
</div>
<div>
<div class="body">
<div class="mv-command aborted">
<span style="display:none" class="cmd-text">[ScmSync]</span>
<div data-state="Aborted" data-start="2020-10-22_18-14-44" data-end="2020-10-22_18-14-54" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator mv-cmd-aborted"><a href="Main/MainThread/Release/Windows_SCM/Windows_SCM_sync/W_adl_sync.xml"><span
class="fonticon fonticon-wrong"></span></a></div>
<span>W_adl_sync</span>
</div>
<div class="mv-command waiting">
<span style="display:none" class="cmd-text">[ScmAttach]
-attached_fw_mod</span>
<div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
<span>W_adl_attach</span>
</div>
</div>
</div>
<div class="mv-command waiting">
<span style="display:none" class="cmd-text">adl_publish</span>
<div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
<span>W_adl_publish</span>
</div>
<div class="mv-command waiting">
<span style="display:none" class="cmd-text">code:[ScmDsWs]
[workspace]</span>
<div data-state="Waiting" data-start="-1" data-end="-1" data-profile="ChgWS_64b_Win" data-system="WIN64" class="indicator
mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
<span>W_adl_ds_ws</span>
</div>
</div>
</div>
<div class="mv-thread">
<table style="width:100%">
<tbody>
<tr>
<td style="vertical-align: top;">
<div>
<div class="body">
<div>
<div class="body">
<div class="mv-command waiting">
<span style="display:none" class="cmd-text">if not exist
[WIN64_DRIVE]\[WIN64_DIR]\[PreqDir] mkdir
[WIN64_DRIVE]\[WIN64_DIR]\[PreqDir]</span>
<div data-state="Waiting" data-start="-1" data-end="-1" data-profile="TCK" data-system="WIN64" class="indicator
mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
<span>W64_Shared_Preq_mkdir</span>
</div>
<div class="mv-command waiting">
<span style="display:none" class="cmd-text">mkCopyPreq -W
[WIN64_DRIVE]\[WIN64_DIR] -p [WIN_PREQ_DIR] -t
[WIN64_DRIVE]\[WIN64_DIR]\[PreqDir] -d -o win_b64 -retry 10 -time 30
-copyretry 10 -copytime 30</span>
<div data-state="Waiting" data-start="-1" data-end="-1" data-profile="CD_WS_64b_Win" data-system="WIN64" class="indicator
mv-cmd-waiting"><span class="fonticon fonticon-clock"></span></div>
<span>W64_mkCopyPreq</span>
</div>
</div>
</div>
<div class="mv-thread">
<table style="width:100%">
<tbody>
<tr>
<td style="vertical-align: top;">
<div>
<div class="body"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
<td style="vertical-align: top;">
<div>
<div class="body">
<div class="mv-thread">
<table style="width:100%">
<tbody>
<tr>
<td style="vertical-align: top;">
<div class="mv-command
done">
<div data-state="Done" data-start="2020-10-22_18-13-49" data-end="2020-10-22_18-14-53" data-profile="CD" data-system="WIN64" class="indicator mv-cmd-done"><a><span
class="fonticon fonticon-check"></span></a></div>
<span>WIN64_MCCMon</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>How to draw a curve with just CSS
You can just do it using border-bottom radius. Like this:
div{ background-color:blue; width:500px; height:90px; border-bottom-left-radius:50%; border-bottom-right-radius:50%;}<div></div>Related Topics
Apply External CSS to Specific Area
Vertically Center a Div with Variable Height Within a Div That Is 100% of The Viewport
Which Browsers Still Support CSS Expressions
Overflow with Absolute/Relative Positioning Layout
Fullwidth and Multiple Columns Using Flexbox
Min - Height with Child Set to Position:Absolute
CSS Target Just Class Name Starts with and Ends with String
How to Create a Button (Or Div) with a Border That Has a Gradient and Has Rounded Corners
Media Query in Responsive Email Template
Why Is Google Font Weight Not Working