CODEWITHSUNDEEP
css
Misiu
Misiu

Reputation: 4919

visually merge borders around two separate divs so they look as one

I have two boxes one on top and one on left.
I'm using :after attribute to add line (border) after div.

First thing I want to do is to "join" both red borders.Right now there is empty gap between them, but if I change #toolbar::after left to '15px' I get that unwanted green line between red lines - can this be fixed?

Another thing is hovering over sidebar. After I move mouse cursor over sidebar it is moving to left:0, but border around toolbar isn't moving. Can I modify toolbar border after I hover over sidebar?

Below is sample code that illustrates my problem

html {
    background: #e6e6e6;
}
#sidebar, #toolbar {
    position: fixed;
    top: 0;
    left: 0;
}
#toolbar {
    z-index: 102;
    height: 50px;
    right: 0;
    text-shadow: 0 -1px 0 #000000;
    background: #222222;
}
#sidebar {
    z-index: 103;
    bottom: 0;
    width: 80px;
    margin-top: 50px;
    background: black;
    left: -60px;
    transition: all 0.2s ease;
    transform: translateZ(0);
}
#sidebar:hover {
		left: 0;
	}
#sidebar::after {
    content:'';
    bottom: 0;
    width: 4px;
    position: absolute;
    right: 0px;
    top: 0;
    display: block;
    border-right: 1px solid green;
    background: red;
    -webkit-box-sizing: initial;
    ;
}
#toolbar::after {
    content:'';
    right: 0;
    height: 4px;
    position: absolute;
    left: 20px;
    bottom: 0;
    display: block;
    border-bottom: 1px solid green;
    background: red;
    -webkit-box-sizing: initial;
    ;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div id="toolbar"></div>
<div id="sidebar"></div>

Upvotes: 0

Views: 355

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15971

You can use box-shadow instead of a border box-shadow: 5px 1px 0px 0px green;

Note :- I have changed the html structure for the pseudo element to move to left when hovered on sidebar

html {
  background: #e6e6e6;
}
#sidebar,
#toolbar {
  position: fixed;
  top: 0;
  left: 0;
}
#toolbar {
  z-index: 102;
  height: 50px;
  right: 0;
  text-shadow: 0 -1px 0 #000000;
  background: #222222;
}
#sidebar {
  z-index: 103;
  bottom: 0;
  width: 80px;
  margin-top: 50px;
  background: black;
  left: -60px;
  transition: all 0.2s ease;
  transform: translateZ(0);
}
#sidebar:hover {
  left: 0;
}
#sidebar::after {
  content: '';
  bottom: 0;
  width: 4px;
  position: absolute;
  right: 0px;
  top: 0;
  display: block;
  border-right: 1px solid green;
  background: red;
  -webkit-box-sizing: initial;
  ;
}
#toolbar::after {
  content: '';
  right: 0;
  height: 4px;
  position: absolute;
  left: 15px;
  bottom: 0;
  display: block;
  background: red;
  -webkit-box-sizing: initial;
  box-shadow: 5px 1px 0px 0px green;
  transition: all 0.2s ease;
}
#sidebar:hover + #toolbar::after {
  left: 75px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div id="sidebar"></div>
<div id="toolbar"></div>

Upvotes: 1

Related Questions