Robert J. Robert J. - 4 months ago 19
CSS Question

css sidebar with angled borders

I am trying to create a simple sidebar (anchored to the right of screen), where the first thing user will see is something like this attached to the right of the screen:

enter image description here

(my apologies for image quality, I did it in Paint). As you can see the borders are not 90 degrees but at an angle.

Afterwards when user clicks this icon, it expands invisible sidebar with additional content (I can take care about this part).

What I am having troubles with, is creating the above mentioned picture. Here is my html code so far:

<div class="row">

<div class="SideBar">
<i class="icon-cog icon-2x" aria-hidden="true"></i>
<div class="sidebar-content">
<p>test</p>
</div>
</div>

<div class="col-sm-4 col-sm-offset-4">
<h3>Some header here</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

</ul>
</div>
</div>


and my CSS:

.SideBar {
position:fixed;
height:100%;
overflow:hidden;
width:250px;
right:0;
z-index:1;
display:flex;
}

.SideBar > i {
color:black;
width:30px;
height:32px;
cursor:pointer;
padding:5px;
border-top:solid 1px blue;
border-left:solid 1px blue;
border-bottom:solid 1px blue;
}

.SideBar .sidebar-content {
display:inline-block;
width:100%;
height:100%;
background:#e6e6e6;
}


and finally a plunk I have created where there is all above mentioned:
https://plnkr.co/edit/CQpZOd6qkf95oYsbaXNj?p=preview

I know it's something simple, yet I cannot make it work. As you will see, my image is strangely distorted (not in the center of borders). Any help would be more than appreciated!

Answer

Try this

*{
  margin:0;
  padding:0;
}
.sidebar{
  height:100vh;
  width:20%;
  float:right;
  background:#eee;
  position:relative;
}
.icon{
  width:50px;
  height:50px;
  background-size:cover;
  position:absolute;
  top:25px;
  left:-50px;
  background-color:#eee;
}
.icon img{
  width:90%;
  z-index:5;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.icon:before{
  content: '';
  width: 150%;
  background: #eee;
  height: 15px;
  display: block;
  position: absolute;
  top: -10px;
  transform: rotate(-10deg);
  z-index: 1;
}
.icon:after{
  content: '';
  width: 150%;
  background: #eee;
  height: 15px;
  display: block;
  position: absolute;
  bottom: -10px;
  transform: rotate(10deg);
  z-index: 1;
}
<div class="sidebar">
  <span class="icon"><img src="https://cdn3.iconfinder.com/data/icons/simple-files-1/128/Settings-128.png"></span>
</div>