vue 长方形文本框 切右上角

你可以使用 CSS 的伪类 `::before` 和 `::after` 来实现切角效果，具体实现方法如下：

<div class="input-wrapper">
  <input type="text" placeholder="请输入文本">
</div>

.input-wrapper {
  position: relative;
  display: inline-block;
}

.input-wrapper::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  border-top: 10px solid transparent;
  border-right: 10px solid #ccc;
}

.input-wrapper::after {
  content: "";
  position: absolute;
  top: -11px;
  right: -11px;
  border-top: 11px solid transparent;
  border-right: 11px solid #fff;
}

input[type="text"] {
  border: 1px solid #ccc;
  padding: 10px;
}

这段 CSS 代码中，`::before` 伪类用来绘制灰色的三角形，`::after` 伪类用来绘制白色的三角形，从而实现切角效果。同时，我们为文本框添加了 `border` 和 `padding` 样式，使其成为一个长方形文本框。你可以根据实际情况调整三角形的大小和颜色，以及文本框的边框和内边距。