箭头

1213.jpg

{['售前', '售中', '售后'].map((item: any, index: any) => {
  return (
    <div className='show-process-item' key={index}>
      <div className='show-process-item-a'></div>
      <div className='show-process-item-b'>{item}</div>
      <div className='show-process-item-c'></div>
    </div>
  );
})}

.show-process-item{
  width: 50px;
  padding-top: 80px;
  .show-process-item-a{
    border: 25px solid transparent;
    width: 50px;
    height: 50px;
    border-right-color: #cb0000;
    border-bottom-color: #cb0000;
    border-left-color: #cb0000;
  }
  .show-process-item-b {
    width: 50px;
    background-color: #cb0000;
    color: white;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 25px;
    box-sizing: border-box;
  }
  .show-process-item-c {
    border: 25px solid #cb0000;
    width: 50px;
    height: 50px;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}