i have a flow chart done using HTML and css, I used the code from codepen to create the flow chart, the css is like below:
.orgchart p {
display: inline-block;
background-color: DarkTurquoise;
padding: 8px;
border-radius: 10px;
color: white;
text-align: center;
}
.orgchart p:hover {
background-color: MediumSeaGreen;
cursor: pointer;
}
.orgchart p .collapse {
position: absolute;
bottom: -15px;
left: calc(50% - 6px);
color: #EEEEEE;
background-color: #CCCCCC;
border-radius: 6px;
height: 12px;
width: 12px;
font-size: 12px;
text-align: center;
}
/*chart nodes*/
.orgchart {
display: inline-block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.orgchart,
.orgchart ul {
padding: 0;
margin: 0;
}
/*align children horizontally using CSS flex*/
.orgchart ul {
display: flex;
}
/*align nodecontent and children list vertically*/
.orgchart li {
display: flex;
flex-direction: column;
position: relative;
}
/*arrange the nodecontent centered above the children list*/
.orgchart p {
align-self: center;
position: relative;
margin: 20px 5px;
}
.orgchart .collapsed>ul {
display: none;
}
/*connections*/
.orgchart li::before,
.orgchart p::after,
.orgchart p::before {
box-sizing: border-box;
content: '';
position: absolute;
z-index: -1;
border: 0px solid #CCCCCC;
}
.orgchart li:not(:only-child)::before {
border-top-width: 2px;
width: 100%;
height: 20px;
top: 0px;
}
.orgchart li:first-child::before {
width: calc(50% + 1px);
right: 0;
border-left-width: 2px;
border-top-left-radius: 7px;
}
.orgchart li:last-child::before {
width: calc(50% + 1px);
border-right-width: 2px;
border-top-right-radius: 7px;
}
.orgchart p::after,
.orgchart p::before {
border-left-width: 2px;
width: 2px;
height: 20px;
left: calc(50% - 1px);
}
.orgchart p::before {
top: -20px;
}
.orgchart p::after {
bottom: -20px;
}
.orgchart li:first-child:not(:only-child)>p::before,
.orgchart li:last-child:not(:only-child)>p::before {
border-left-width: 0px;
}
.orgchart .leaf>p::after,
.orgchart .root>p::before,
.orgchart .collapsed>p::after {
display: none;
}
/*vertical nodes*/
.orgchart li.vertical>ul {
flex-direction: column;
align-items: flex-start;
margin: 0 5px 20px;
position: relative;
}
.orgchart li.vertical>ul>li>p {
margin: 20px 0 0 10px;
}
/*
ul.orgchart, .orgchart ul {
border: 5px solid DarkBlue;
}
.orgchart li {
border: 5px solid Lime;
}
.orgchart p {
outline: 5px solid DeepPink;
}*/
/*vertical connectors*/
.orgchart li.vertical>ul::before {
box-sizing: border-box;
content: '';
position: absolute;
top: -2px;
left: 10px;
height: 10px;
width: calc(50% - 19px);
border-top: 2px solid #CCCCCC;
}
.orgchart li.vertical>p::after {
border-width: 0 2px 2px 0;
border-bottom-right-radius: 7px;
width: 10px;
left: auto;
right: calc(50% - 1px);
}
.orgchart li.vertical>ul>li::before {
border-width: 0 0 0 2px;
left: 0px;
height: 100%;
width: 10px;
border-radius: 0;
}
.orgchart li.vertical>ul>li:first-child::before {
top: -2px;
height: calc(100% + 2px);
border-top-width: 2px;
border-top-left-radius: 7px;
}
.orgchart li.vertical>ul>li:last-child::before {
height: calc(50% + 6px);
border-bottom-width: 2px;
border-bottom-left-radius: 7px;
}
.orgchart li.vertical>ul>li>p::before {
height: 2px;
width: 8px;
top: calc(50% - 1px);
left: -8px;
border-width: 2px 0 0 0;
}
.orgchart li.vertical>ul>li:last-child>p::before {
display: none;
}
.vertical p {
font-size: 7.5px !important;
}
.leaf p {
font-size: 7.5px !important;
}
#toffymate a {
color: white !important;
}
this is my full code: enter link description here
the problem is I am getting unwanted line in the flow chart like below which I have marked in yellow color:
can anyone please tell me how to remove it, thanks in advance
You can change your chart with these css:
First, remove a line you don't need
.orgchart > li > ul > li:nth-child(4) > ul:before {content:none;}
Then move the line you need with the rounded corner pointing left so it's place over the top line
.orgchart > li > ul > li:nth-child(4):before {right: 116px;}
And finally change the vertical main line so it won't show any top corner and stay in the right position
.orgchart > li > ul > li:nth-child(4) > ul > li:first-child:before {
top: 20px;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-top: 0;
}
This is how it looks now: JSFIDDLE