如何显示完整的直角三角形？右边缘被切断

Question

我目前正在努力解决美学问题。我的三角形按钮在右上角被切断了，这不是一个景象，基本上是一个右侧的梯形。

我所做的是创建一个输入字段，并在输入字段的末尾对齐了一个三角形提交按钮。

这是什么原因？

.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

您的input元素上的默认填充干扰了酷炫的CSS边框技巧。添加：

padding: 0;

我将元素更改为<button>，并删除了与样式紫色三角形没有直接关系的所有代码。我还重新格式化了三角形边框技巧代码，以使其更加清晰。这都是出于演示目的。只需在代码中添加填充线即可解决此问题。

.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

在主容器中添加display: flex以将三角形向右移动，并在输入字段中将三角形向右移动，我使用了translateY属性。

.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>