如何为表单字段添加边框并裁剪边角，实现全屏幕一致适配？

不用clip-path的固定像素值，改用百分比单位或者伪元素模拟边框的方式，就能适配所有屏幕尺寸。下面给你两种可行方案：

方案一：改进clip-path，使用百分比单位 #

直接给输入框容器应用clip-path，用百分比定义裁剪点，不管容器尺寸怎么变，裁剪比例始终一致：

<div class="formCell surname">
  <label>Surname<span>*</span></label>
  <input type="text" placeholder="" name="surname" class="text" value="">
</div>

.formCell {
  width: 80%; /* 用相对单位适配不同屏幕 */
  max-width: 400px;
  position: relative;
  margin: 1rem 0;
}

.formCell .text {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid #333;
  box-sizing: border-box;
  /* 用百分比定义裁剪路径：左上角切5%宽度，右下角切5%高度 */
  clip-path: polygon(5% 0, 100% 0, 100% calc(100% - 5%), 0 100%, 0 5%);
}

.formCell label {
  position: absolute;
  top: -0.6rem;
  left: 1.2rem;
  background-color: #fff;
  padding: 0 0.3rem;
  font-size: 0.9rem;
}

方案二：伪元素模拟裁剪边框（更灵活） #

如果担心clip-path对某些旧浏览器兼容性不好，可以用容器的伪元素单独绘制带裁剪效果的边框，输入框放在上方，完全不影响输入交互：

.formCell {
  width: 80%;
  max-width: 400px;
  position: relative;
  margin: 1rem 0;
}

.formCell .text {
  width: 100%;
  padding: 0.8rem 1rem;
  border: none;
  background-color: #fff;
  box-sizing: border-box;
}

/* 用伪元素绘制带裁剪的边框 */
.formCell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #333;
  /* 同样用百分比定义裁剪路径 */
  clip-path: polygon(5% 0, 100% 0, 100% calc(100% - 5%), 0 100%, 0 5%);
  pointer-events: none; /* 让点击穿透到输入框 */
}

.formCell label {
  position: absolute;
  top: -0.6rem;
  left: 1.2rem;
  background-color: #fff;
  padding: 0 0.3rem;
  font-size: 0.9rem;
}

为什么之前的clip-path效果不一致？ #

你之前用的应该是固定像素值（比如15px）定义裁剪点，当屏幕尺寸变化、容器宽度/高度改变时，固定像素的裁剪比例会失调。换成百分比或者em这类相对单位，就能保证裁剪部分和容器的比例始终统一，适配所有屏幕。

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