css 화살표 프로그래스바 만들수 잇을까요?

css 다각형

https://css-tricks.com/the-shapes-of-css/

<a href='#' id='pointer'>ASDFG</a>

#pointer { display:inline-block; text-align:center; line-height:40px; color:#FFF;
      width: 200px;
      height: 40px;
      position: relative;
      background: red;
    }
    #pointer:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 20px solid white;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }
    #pointer:before {
      content: "";
      position: absolute;
      right: -20px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 20px solid red;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }