Button with two right arrows

Question

What I need is to implement button with two right arrows. One arrow to cut piece of left side of button and one arrow to extend right side of button (please see attached image).

What I succeed for now is only to add right arrow (see image below).

Below is current css that I have.

  .arrow-button {
    width: 178px;
    height: 82px;
    position: relative;
    object-fit: contain;
    margin-right: 20px;
    background-color: #be1a20;
  }
  .arrow-button:before {
    content:"";
    position: absolute;
    left: 100%;
    top: 26px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-left: 13px solid #be1a20;
    border-bottom: 13px solid transparent;
 }
 
 .arrow-label {
    font-family: Montserrat;
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    margin: auto;
  }
  .layer {
    font-family: Montserrat;
    font-size: 24px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    margin: auto;
  }

<div class="arrow-button">
        <div class="row">
          <label class="arrow-label">
            SENT
          </label>
        </div>
        <div class="row">
          <label class="layer">
            10
          </label>
        </div>
      </div>

Answer 1

Similar what you did with right arrow, use :before and :after:

.arrow-button {
  width: 178px;
  height: 82px;
  position: relative;
  object-fit: contain;
  margin-right: 20px;
  background-color: #be1a20;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.arrow-button:before,
.arrow-button:after {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-left: 13px solid white;
  border-bottom: 13px solid transparent;
}

.arrow-button:after {
  left: 100%;
  border-left: 13px solid #be1a20;
}

.arrow-label {
  font-family: Montserrat;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  margin: auto;
}

.layer {
  font-family: Montserrat;
  font-size: 24px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
  margin: auto;
}

<div class="arrow-button">
  <div class="row">
    <label class="arrow-label">SENT</label>
  </div>
  
  <div class="row">
    <label class="layer">10</label>
  </div>
</div>

So the only difference right arrow from the left is left and border-left styles you need to redefine:

.arrow-button:after {
  left: 100%;
  border-left: 13px solid #be1a20;
}

Note, I vertical-aligned text with flexbox but you don't have to do it this way, this is not relevant to arrows.