The core issue here is that your .submit_btn is forced to share the same grid cell as your text input (via grid-column: 1; grid-row: 1;), and this overlap (combined with grid cell constraints) is clipping the sharp right corner of your border-based triangle, turning it into a right trapezoid.

Let’s break down the root causes:

• Overlapping Grid Elements: Both the text input and submit button occupy the exact same grid cell. Even with justify-self: flex-end, the grid cell’s width is constrained by the text input (which likely takes 100% of the cell’s width). The triangle shape relies on borders extending from the button’s position (the cell’s right edge), but if the cell’s overflow is implicitly hidden (or the input pushes the button’s edge outside the container), the triangle’s right corner gets chopped off.
• Box Model Constraints: Your button uses width: 0; height: 0; with borders to create the triangle, but the button’s total calculated width equals its left border width (17.3px). If this width causes the button to spill outside the grid cell (or parent container), part of the shape gets truncated.

Fixes to Restore the Full Triangle Shape #

1. Separate Grid Columns (Cleanest Solution)

Modify your .input_wrapper to use a two-column grid, giving the button its own dedicated space so it doesn’t overlap with the input:

.input_wrapper {
  display: grid;
  grid-template-columns: 1fr auto; /* Input takes full width, button gets auto-sized space */
  gap: 0; /* Remove gap if you want the button flush against the input */
}

.submit_btn {
  grid-row: 1;
  grid-column: 2; /* Move button to the second column */
  /* Keep your existing border styles */
  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;
  cursor: pointer;
}

.name_field {
  grid-row: 1;
  grid-column: 1;
  width: 100%; /* Ensure input fills its column */
}

2. Adjust Overflow and Positioning (For Overlapping Layout)

If you want to keep both elements in the same grid cell, ensure the container doesn’t clip the button and add space to the input to avoid blocking the triangle:

.input_wrapper {
  display: grid;
  overflow: visible; /* Prevent container from clipping the button */
  position: relative;
}

.submit_btn {
  grid-row: 1;
  grid-column: 1;
  justify-self: flex-end;
  margin-right: 0; /* Remove default button margin */
  z-index: 1; /* Ensure button sits above the input */
  /* Keep your existing border styles */
}

.name_field {
  padding-right: 20px; /* Add padding to input to make room for the button */
}

After applying either fix, your triangular button should render fully, aligning perfectly at the end of the text input without truncation.

内容的提问来源于stack exchange，提问作者Arthur Robaeys