Create border arrow with css

Question

So I got a sketch of a designer I worked with and was wondering how I create the border arrows in the picture below

Answer 1

You can create triangles with CSS borders by:

border-top: 20px solid transparent; 
border-bottom: 20px solid transparent; /* 40px height (20+20) */
border-left: 20px solid green

I've created the same thing as you see above here:

#container {
  width:150px;
  height:40px;
  background-color:green;
  position:relative;
}
    
.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent; 
  border-bottom: 20px solid transparent; /* 40px height (20+20) */
  border-left: 20px solid green;
  position:absolute;
  right:-20px;
}