html - display triangle on left side of screen -

i have following div aligns left side of screen

css

#nav {  position: fixed;   height: 50px; width: 50px;  display: block;  background-color: #000; } 

this div contains icon acting link

html

<div id="nav">icon</div> 

i want div triangle (pointing towards right) , not square

i find site useful: https://css-tricks.com/examples/shapesofcss/

right-facing triangle:

#triangle-right {     width: 0;     height: 0;     border-top: 50px solid transparent;     border-left: 100px solid red;     border-bottom: 50px solid transparent; } 

you can adjust border properties change width, height, , color of triangle.

something you're looking for: https://jsfiddle.net/kh2xsoh2/1

html

<div id="nav"><span>icon</span></div> 

css

#nav {     width: 0;     height: 0;     border-top: 25px solid transparent;     border-left: 50px solid #000;     border-bottom: 25px solid transparent;     position: fixed; }  #nav span {   position: absolute;   line-height: 0;   left: -45px;   color: white; }