How to create connection between two containers?

Question

enter image description here

I am trying to create this component. The problem here is the connection between two containers. It is a kind of sign up form for users. There are 4 sections and each section opens its own window on it's right side. The problem is the empty space between them. I am looking for a CSS solution for this part enter image description here

I am creating this project in react. Dynamic component solution would be perfect. I am open to any kind of suggestion

First thing I would try is use 2 circles with 1/4 of a border positioned absolutely to the 'step' button — metaDesign, Mar 02 '20 at 10:08
You are trying to make it like steps, right? Users will enter first personal info, and then click next and automatically it will open the second step so on. Could you explain with more details? Thus, We might help you with that problem. — Halil İbrahim Özdoğan, Mar 02 '20 at 10:25
It should be easily possible using :after. But your Question is lacking code. — KHansen, Mar 02 '20 at 10:43
could you create a fiddle so that it can be inspected and add css? — Kevin, Mar 02 '20 at 11:14
This article will help you https://stackoverflow.com/questions/58078627/how-do-i-achieve-outward-curve-for-active-sidebar-item-using-pure-css/58078980#58078980 — Rafael Perozin, Mar 04 '20 at 13:19
Does this answer your question? [How do I achieve outward curve for active sidebar item using pure CSS](https://stackoverflow.com/questions/58078627/how-do-i-achieve-outward-curve-for-active-sidebar-item-using-pure-css) — Rafael Perozin, Mar 04 '20 at 13:20

score 1 · Answer 1 · answered Mar 02 '20 at 11:57

Try this . I have used bootstrap here

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" 
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
 </script>
<script 
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> 
</script>
 <style>
    a:hover,a:focus{
    text-decoration: none;
     outline: none;
     }
    .vertical-tab{
      font-family: 'Signika', sans-serif;
      display: table;
     }
    .vertical-tab .nav-tabs{
      display: table-cell;
      width: 28%;
      min-width: 28%;
       vertical-align: top;
       border: none;
      }
    .vertical-tab .nav-tabs li{
    float: none;
   vertical-align: top;
    }
   .vertical-tab .nav-tabs li a{
     color: #fff;
     background-color: #444;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
     text-align: center;
     text-transform: uppercase;
     padding: 14px 18px 12px;
     margin: 0 0 10px 0;
     border-radius: 5px 0 0 20px;
    border: none;
    position: relative;
     z-index: 1;
     transition: all 0.5s ease 0s;
     }
    .vertical-tab .nav-tabs li a:hover,
    .vertical-tab .nav-tabs li.active a,
    .vertical-tab .nav-tabs li.active a:hover{
color: #fff;
background-color: #2e86de;
text-shadow: 3px 3px 0 rgba(0,0,0,0.2);
border: none;
 }
.vertical-tab .nav-tabs li a:before,
.vertical-tab .nav-tabs li a:after{
content: '';
background: #fff;
height: 100%;
width: 0;
position: absolute;
left: 0;
top: 0;
z-index: -1;
transition: all 0.3s ease;
 }
.vertical-tab .nav-tabs li a:after{
left: auto;
right: 0;
} 
.vertical-tab .nav-tabs li a:hover:before,
.vertical-tab .nav-tabs li.active a:before,
.vertical-tab .nav-tabs li a:hover:after,
.vertical-tab .nav-tabs li.active a:after{
width: 100%;
opacity: 0;
}
.vertical-tab .tab-content{
color: #fff;
background: #2e86de;
font-size: 15px;
letter-spacing: 1px;
line-height: 25px;
padding: 12px 15px 12px 25px;
border-radius: 0 20px 20px 5px;
display: table-cell;
position: relative;
}
.vertical-tab .tab-content h3{
font-weight: 600;
margin: 0 0 5px 0;
}
@media only screen and (max-width: 479px){
.vertical-tab .nav-tabs{
    width: 100%;
    display: block;
    border: none;
}
.vertical-tab .nav-tabs li a{
    padding: 14px 20px 12px;
    margin: 0 0 13px;
    border-radius: 5px 20px;
}
.vertical-tab .tab-content{
    padding: 20px 15px 10px;
    border-radius: 5px 20px;
    display: block;
}
.vertical-tab .tab-content h3{ font-size: 18px; }
 }
JavaScript (Vertical Tab depend on jQuery and Bootstrap.)
1
2
<script type="text/javascript" src="https://code.jquery.com/jquery- 
1.12.0.min.js"></script>
 <script 
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
  integrity="sha384- 
  0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
 crossorigin="anonymous"></script>
  License Terms

  </style>
   </head>
 <body>
  <div class="container">
    <div class="row">
    <div class="col-md-6">
        <div class="vertical-tab" role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#Section1" 
     aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li>
                <li role="presentation"><a href="#Section2" aria- 
    controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
                <li role="presentation"><a href="#Section3" aria- 
   controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content tabs">
                <div role="tabpanel" class="tab-pane fade in active" 
    id="Section1">
                    <h3>Section 1</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
   elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, 
    vitae consequat nisi justo in tortor. Proin accumsan felis ac felis 
    dapibus, non iaculis mi varius, mi eros viverra massa.</p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Section2">
                    <h3>Section 2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
    elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, 
     vitae consequat nisi justo in tortor. Proin accumsan felis ac felis 
      dapibus, non iaculis mi varius, mi eros viverra massa.</p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Section3">
                    <h3>Section 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 
      elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, 
       vitae consequat nisi justo in tortor. Proin accumsan felis ac felis 
      dapibus, non iaculis mi varius, mi eros viverra massa.</p>
                </div>
            </div>
        </div>
    </div>
    </div>
  </div>
  </body>
   </html>

How to create connection between two containers?

1 Answers1