Arrow Right Type Sidebar

Question

I've been banging this problem for hours and still can't figure out how to achieve this arrow right type sidebar. I want the look of my sidebar like this. Sidebar UI I want to achieve

How can I achieve that arrow right sidebar? Is there similar code that I can used as basis?

Please search before you ask. http://stackoverflow.com/questions/7073484/how-do-css-triangles-work — Philip, Jan 18 '17 at 10:29
Possible duplicate of [How do CSS triangles work?](http://stackoverflow.com/questions/7073484/how-do-css-triangles-work) — José Luis, Jan 18 '17 at 10:34

score 2 · Accepted Answer · answered Jan 18 '17 at 10:36

 .right-arrow {
 display: inline-block;
 position: relative;
 background: orange;
 padding: 20px;
}
.right-arrow:after {
 content: '';
 display: block;  
 position: absolute;
 left: 100%;
 top: 0;
 width: 0;
 height: 0;
 border-top: 20px solid transparent;
 border-right: 20px solid transparent;
 border-bottom: 20px solid transparent;
 border-left: 20px solid orange;
}

<div class="right-arrow"></div>

score 0 · Answer 2 · answered Jan 18 '17 at 10:35

This can be done with the help of pseudo class ":before or :after"

li { width:200px; background:green; list-style-type:none; margin-bottom:20px; padding:5px; color:#fff; position:relative;}
li:before {
  content:"";
  position:absolute; 
  right:-14px; top:0px;
  width: 0; 
  height: 0; 
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 14px solid green;
}

<ul>
 <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  </ul>

Arrow Right Type Sidebar

2 Answers2