css3如何实现这样的图形

Question

需求是这样的：宽度不定
该如何实现呢

Answer 1

<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:'';
}

Answer 2

 .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这种

Answer 3

找UI小姐姐给你做一个不就好了