Pointed/angled arrow-style borders in CSS

Question

I\'m making a breadcrumb menu and attempting to do it in pure CSS so I don\'t have to use a background image to get an arrow shape. Is it possible to achieve this angled border

Answer 1

Another way to do it is to use an :after element and make this a rectangle with two borders and rotate this.

Here is an example: Breadcrumb

Main CSS:

li-item:after {
  content: "";
  width: 5rem;
  height: 100%;
  display: inline-block;
  position: absolute;
  background: transparent;
  right: 0;
  top: 0;
  transform: translateX(-1rem) rotate(45deg); 
  border-right: 4px solid white;
  border-top: 4px solid white;
}