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

把寬度設置成你想要的就可以了，不定的話可以使用CSS 的var來定義，或者用less或sass這種

找UI小姐姐給你做一個不就好了

<div id='chevron'></div>
#chevron {
  position: relative;
  text-align: center;

  margin-bottom: 6px;
  height: 34px;
  width: 200px;
  background:red;
}
#chevron:before {
  width: 0px; 
   height: 0px; 
   border-top: 12px solid red; 
   border-right: 100px solid transparent; 
  position:absolute;
  left:0;
  top:100%;
  content:'';
}
#chevron:after{
  width: 0px; 
      height: 0px; 
      border-top: 12px solid red; 
      border-left: 100px solid transparent;
  position:absolute;
  right:0;
  top:100%;
  content:'';
}