如何裁剪表单字段

Question

如何设置屏幕截图中所示的带有边框的表单字段样式，同时裁剪左上角和右下角？

我尝试过使用

clip-path: polygon()

，但它在不同的屏幕尺寸上有所不同。我需要一个适用于所有屏幕尺寸的一致设置。

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

Answer 1

您可以将

clip-path

与

%

或

px

单位一起使用，因此除了用于轻松更改宽度和高度的变量之外，我刚刚编写了这段代码。边框“效果”是使用两个元素制作的（其中一个是伪元素，不能应用于

input

，所以我使用了

contenteditable

div）。

:root {
  --cut-corner-width: 200px;
  --cut-corner-height: 40px;
  --cut-corner-size: 10px;
  background: navy;
}

.cut-corner {
  width: var(--cut-corner-width);
  height: var(--cut-corner-height);
  line-height: var(--cut-corner-height);
  background-color: red;
  clip-path: polygon(var(--cut-corner-size) 0, calc(100% - var(--cut-corner-size)) 0, 100% var(--cut-corner-size), 100% calc(100% - var(--cut-corner-size)), calc(100% - var(--cut-corner-size)) 100%, var(--cut-corner-size) 100%, 0 calc(100% - var(--cut-corner-size)), 0 var(--cut-corner-size));
  position: relative;
  color: white;
  padding: 10px;
  outline: none;
}

.cut-corner:before {
  padding: 10px;
  content: '';
  width: calc(var(--cut-corner-width) - 4px);
  height: calc(var(--cut-corner-height) - 4px);
  background-color: navy;
  clip-path: polygon(var(--cut-corner-size) 0, calc(100% - var(--cut-corner-size)) 0, 100% var(--cut-corner-size), 100% calc(100% - var(--cut-corner-size)), calc(100% - var(--cut-corner-size)) 100%, var(--cut-corner-size) 100%, 0 calc(100% - var(--cut-corner-size)), 0 var(--cut-corner-size));
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: -1;
}

<div class="cut-corner" contenteditable="true">
  value
</div>

在不久的将来我将添加带有

input

的版本。