How to show complete right triangle? right edge cut off - html

Question

I'm currently struggling with an aesthetic problem. My triangle button is being cut off at the right corner and it's not a sight, it's basically a right-sided trapezium.
What i did was make an input field, and aligned a triangle submit button at the end of the input field.
What's the cause of this?
.submit_btn {
display: block;
grid-row: 1;
grid-column: 1;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 17.3px;
border-color: transparent transparent transparent #bc2ac1;
background-color: transparent;
align-self: center;
justify-self: flex-end;
cursor: pointer;
}
.submit_btn:focus {
outline: none;
}
<form class="form_name" action="">
<label class="name" for="name">What's your name?</label>
<div class="input_wrapper">
<input class="name_field" type="text" name="name" placeholder="Your name">
<input class="submit_btn" type="submit" value="">
</div>
</form>

Answer 1

Default padding on your input element was interfering with the cool CSS border trick. Add:
padding: 0;
I changed the element to a <button> and removed all the code not directly related to styling the purple triangle. I also reformatted the triangle border trick code to make it a little clearer. This is all for demo purposes. Just adding the padding line to your code will fix it.
.submit_btn {
/* this fixes the tip of the triangle */
padding: 0;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 17.3px solid #bc2ac1;
border-right: none;
cursor: pointer;
}
<form class="form_name" action="">
<label class="name" for="name">What's your name?</label>
<div class="input_wrapper">
<input class="name_field" type="text" name="name" placeholder="Your name">
<button class="submit_btn" type="submit" value=""></button>
</div>
</form>

Answer 2

Add display: flex to the main container to move your triangle to right and for moving your triangle to in input field, I used translateY property.
.input_wrapper {
display: flex;
}
.submit_btn {
display: block;
grid-row: 1;
grid-column: 1;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 17.3px;
border-color: transparent transparent transparent #bc2ac1;
background-color: transparent;
align-self: center;
justify-self: flex-end;
cursor: pointer;
transform: translateX(-25px);
}
.submit_btn:focus {
outline: none;
}
<form class="form_name" action="">
<label class="name" for="name">What's your name?</label>
<div class="input_wrapper">
<input class="name_field" type="text" name="name" placeholder="Your name">
<input class="submit_btn" type="submit" value="">
</div>
</form>