html - CSS: Make border on pure-CSS arrow -

i have code snippet:

.multiply-button {    display: table;    background: rgba(0, 0, 0, 0);    border: none;    color: white;    padding: 0;  }  .multiply-button-content {    display: table-cell;    background: green;    padding: 10px 9px;    border: solid 1px black;    border-right: none !important;  }  .multiply-button-arrow {    display: table-cell;    width: 0px;    height: 0px;    border-style: solid;    border-width: 20px 0 20px 12px;    border-color: transparent transparent transparent green;  }

<button id="multiply-button" class="multiply-button">    <div class="multiply-button-content">multiply</div>    <div class="multiply-button-arrow"></div>  </button>

i need make border on "arrowed" button. can border rectangle part (i've did it), how make border on triangle part?

the following should need

.multiply-button {    display: table;    background: rgba(0, 0, 0, 0);    border: none;    color: white;    padding: 0;  }  .multiply-button-content {    display: table-cell;    background: green;    padding: 0 9px;    border: solid 1px black;    border-right: none !important;    position: relative;    vertical-align:middle;    height: 40px; /* double border width */    box-sizing: border-box;  }  .multiply-button-content:after,  .multiply-button-content:before {    left: 100%;    top: 50%;    border: solid transparent;    content: " ";    height: 0;    width: 0;    position: absolute;    pointer-events: none;    border-width: 20px 0 20px 12px;    margin-top: -20px;  }  .multiply-button-content:after {    border-color: rgba(0, 128, 0, 0);    border-left-color: #008000;    margin-left: -1px;  }  .multiply-button-content:before {    border-color: rgba(0, 0, 0, 0);    border-left-color: #000000;  }

<button id="multiply-button" class="multiply-button">    <div class="multiply-button-content">multiply</div>  </button>

this useful tool