输入溢出不可见

Question

我正在尝试创建一个工具来更改 margin/padding，看起来像这样

我能走到这一步

我完全无法显示完整的输入，溢出并没有真正起作用，所以我现在有点迷路了。

我做了 2 个盒子，每边都有一个标签 + 输入组合，为了制作形状，我在标签上使用了 clip-path 和 poligon() 功能，所有东西几乎都是手动对齐的使用 position: absolute，输入看起来像这样：

input {
  height: 1.5rem;
  width: 3rem;
  border: 1px solid #c0c0c0;
  border-radius: 0.125rem;
  text-align: center;

  /* it's not working work  */
  overflow: visible;
}

有人知道我错过了什么吗？

:root {
  font-size: 16px;
}

.wrapper {
  --initial-height: 10rem;
  --initial-width: 24rem;
  --deviation: 2px;
  --thickness: 1rem;
  position: relative;
  margin: 2rem;
}

.box.outer {
  --height: var(--initial-height);
  --width: var(--initial-width);
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: 0;
  left: 0;
}

.box-border {
  --padding: 0.125rem;
  --height: calc(var(--initial-height) - 2 * var(--thickness) - 3 * var(--padding));
  --width: calc(var(--initial-width) - 2 * var(--thickness) - 3 * var(--padding));
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: calc(var(--thickness) + var(--padding));
  left: calc(var(--thickness) + var(--padding));
  border: 1px solid #808080;
}

.box.inner {
  --height: calc(var(--initial-height) - 2 * var(--thickness) - 5 * var(--padding));
  --width: calc(var(--initial-width) - 2 * var(--thickness) - 5 * var(--padding));
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: var(--padding);
  left: var(--padding);
}

.box h3 {
  position: absolute;
  top: 0.125rem;
  left: calc(var(--thickness) * 1.2);
  font-size: calc(var(--thickness) / 1.5);
  z-index: 10;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: Helvetica;
  font-weight: 400;
}

.side {
  background-color: #facc99;
}

label {
  margin: 0;
  padding: 0;
}

input {
  height: 1.5rem;
  width: 3rem;
  border: 1px solid #c0c0c0;
  border-radius: 0.125rem;
  text-align: center;
  /* @TODO fix - doesn't work  */
  overflow: visible;
}

.side {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.side.left {
  top: 0;
  left: 0;
  width: var(--thickness);
  height: var(--height);
  clip-path: polygon( 0 var(--deviation), 100% calc(var(--thickness) + var(--deviation)), 100% calc(100% - var(--thickness) - var(--deviation)), 0 calc(100% - var(--deviation)));
}

.side.right {
  top: 0;
  right: 0;
  width: var(--thickness);
  height: var(--height);
  clip-path: polygon( 100% var(--deviation), 100% calc(100% - var(--deviation)), 0 calc(100% - var(--thickness) - var(--deviation)), 0 calc(var(--thickness) + var(--deviation)));
}

.side.top {
  top: 0;
  left: 0;
  width: var(--width);
  height: var(--thickness);
  clip-path: polygon( var(--deviation) 0, calc(100% - var(--deviation)) 0, calc(100% - var(--thickness) - var(--deviation)) 100%, calc(var(--thickness) + var(--deviation)) 100%);
}

.side.bottom {
  bottom: 0;
  left: 0;
  width: var(--width);
  height: var(--thickness);
  clip-path: polygon( var(--deviation) 100%, calc(100% - var(--deviation)) 100%, calc(100% - var(--thickness) - var(--deviation)) 0, calc(var(--thickness) + var(--deviation)) 0);
}

<div class="wrapper">
  <div class="box outer">
    <h3>Margin</h3>
    <label class="side top">
            <input type="text" aria-label="margin top" />
        </label>
    <label class="side left">
            <input type="text" aria-label="margin left" />
        </label>
    <label class="side right">
            <input type="text" aria-label="margin right" />
        </label>
    <label class="side bottom">
            <input type="text" aria-label="margin bottom" />
        </label>
  </div>

  <div class="box-border">
    <div class="box inner">
      <h3>Padding</h3>
      <label class="side top">
                <input type="text" aria-label="padding top" />
            </label>
      <label class="side left">
                <input type="text" aria-label="padding left" />
            </label>
      <label class="side right">
                <input type="text" aria-label="padding right" />
            </label>
      <label class="side bottom">
                <input type="text" aria-label="padding bottom" />
            </label>
    </div>
  </div>
</div>

Answer 1

您可以增加 clip-path 的区域以保持溢出可见。剪辑路径不需要适合元素尺寸：

:root {
  font-size: 16px;
}

.wrapper {
  --initial-height: 10rem;
  --initial-width: 24rem;
  --deviation: 2px;
  --thickness: 1rem;
  position: relative;
  margin: 2rem;
}

.box.outer {
  --height: var(--initial-height);
  --width: var(--initial-width);
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: 0;
  left: 0;
}

.box-border {
  --padding: 0.125rem;
  --height: calc(var(--initial-height) - 2 * var(--thickness) - 3 * var(--padding));
  --width: calc(var(--initial-width) - 2 * var(--thickness) - 3 * var(--padding));
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: calc(var(--thickness) + var(--padding));
  left: calc(var(--thickness) + var(--padding));
  border: 1px solid #808080;
}

.box.inner {
  --height: calc(var(--initial-height) - 2 * var(--thickness) - 5 * var(--padding));
  --width: calc(var(--initial-width) - 2 * var(--thickness) - 5 * var(--padding));
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: var(--padding);
  left: var(--padding);
}

.box h3 {
  position: absolute;
  top: 0.125rem;
  left: calc(var(--thickness) * 1.2);
  font-size: calc(var(--thickness) / 1.5);
  z-index: 10;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: Helvetica;
  font-weight: 400;
}

.side {
  background-color: #facc99;
}

label {
  margin: 0;
  padding: 0;
}

input {
  height: 1.5rem;
  width: 3rem;
  border: 1px solid #c0c0c0;
  border-radius: 0.125rem;
  text-align: center;
}

.side {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.side.left {
  top: 0;
  left: 0;
  width: var(--thickness);
  height: var(--height);
  clip-path: polygon(-100px calc(-100px + var(--deviation)),-100px calc(100% + 100px - var(--deviation)) ,calc(100px - var(--deviation)) calc(100% - 100px),calc(101px - var(--deviation)) 100px );
}

.side.right {
  top: 0;
  right: 0;
  width: var(--thickness);
  height: var(--height);
  clip-path: polygon(calc(100% + 100px) calc(var(--deviation) - 100px), calc(100% - 100px + var(--deviation))  100px,calc(100% - 100px + var(--deviation))  calc(100% - 100px),calc(100px + 100%) calc(100% + 100px - var(--deviation)));
}

.side.top {
  top: 0;
  left: 0;
  width: var(--width);
  height: var(--thickness);
  clip-path: polygon( calc(var(--deviation) - 100px) -100px, calc(100% - var(--deviation) + 100px) -100px, calc(100% - 100px - var(--deviation)) 100px,  calc(100px + var(--deviation)) 100px);
}

.side.bottom {
  bottom: 0;
  left: 0;
  width: var(--width);
  height: var(--thickness);
  clip-path:polygon(calc(var(--deviation) - 100px) calc(99px + 100%), calc(100% + 100px - var(--deviation)) calc(100px + 100%), calc(100% - 100px - var(--deviation)) calc(100% - 100px),  calc(100px + var(--deviation)) calc(100% - 100px));
}

<div class="wrapper">
  <div class="box outer">
    <h3>Margin</h3>
    <label class="side top">
            <input type="text" aria-label="margin top" />
        </label>
    <label class="side left">
            <input type="text" aria-label="margin left" />
        </label>
    <label class="side right">
            <input type="text" aria-label="margin right" />
        </label>
    <label class="side bottom">
            <input type="text" aria-label="margin bottom" />
        </label>
  </div>

  <div class="box-border">
    <div class="box inner">
      <h3>Padding</h3>
      <label class="side top">
                <input type="text" aria-label="padding top" />
            </label>
      <label class="side left">
                <input type="text" aria-label="padding left" />
            </label>
      <label class="side right">
                <input type="text" aria-label="padding right" />
            </label>
      <label class="side bottom">
                <input type="text" aria-label="padding bottom" />
            </label>
    </div>
  </div>
</div>

要了解技巧，请添加一个大框阴影以查看新形状：

:root {
  font-size: 16px;
}

.wrapper {
  --initial-height: 10rem;
  --initial-width: 24rem;
  --deviation: 10px;
  --thickness: 1rem;
  position: relative;
  margin: 2rem;
}

.box.outer {
  --height: var(--initial-height);
  --width: var(--initial-width);
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: 0;
  left: 0;
}

.box-border {
  --padding: 0.125rem;
  --height: calc(var(--initial-height) - 2 * var(--thickness) - 3 * var(--padding));
  --width: calc(var(--initial-width) - 2 * var(--thickness) - 3 * var(--padding));
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: calc(var(--thickness) + var(--padding));
  left: calc(var(--thickness) + var(--padding));
  border: 1px solid #808080;
}

.box.inner {
  --height: calc(var(--initial-height) - 2 * var(--thickness) - 5 * var(--padding));
  --width: calc(var(--initial-width) - 2 * var(--thickness) - 5 * var(--padding));
  height: var(--height);
  width: var(--width);
  position: absolute;
  top: var(--padding);
  left: var(--padding);
}

.box h3 {
  position: absolute;
  top: 0.125rem;
  left: calc(var(--thickness) * 1.2);
  font-size: calc(var(--thickness) / 1.5);
  z-index: 10;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: Helvetica;
  font-weight: 400;
}

.side {
  background-color: #facc99;
}

label {
  margin: 0;
  padding: 0;
}

input {
  height: 1.5rem;
  width: 3rem;
  border: 1px solid #c0c0c0;
  border-radius: 0.125rem;
  text-align: center;
}

.side {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:0 0 0 200px red;
}

.side.left {
  top: 0;
  left: 0;
  width: var(--thickness);
  height: var(--height);
  clip-path: polygon(-100px calc(-100px + var(--deviation)),-100px calc(100% + 100px - var(--deviation)) ,calc(100px - var(--deviation)) calc(100% - 100px),calc(101px - var(--deviation)) 100px );
}

.side.right {
  top: 0;
  right: 0;
  width: var(--thickness);
  height: var(--height);
  clip-path: polygon(calc(100% + 100px) calc(var(--deviation) - 100px), calc(100% - 100px + var(--deviation))  100px,calc(100% - 100px + var(--deviation))  calc(100% - 100px),calc(100px + 100%) calc(100% + 100px - var(--deviation)));
}

.side.top {
  top: 0;
  left: 0;
  width: var(--width);
  height: var(--thickness);
  clip-path: polygon( calc(var(--deviation) - 100px) -100px, calc(100% - var(--deviation) + 100px) -100px, calc(100% - 100px - var(--deviation)) 100px,  calc(100px + var(--deviation)) 100px);
}

.side.bottom {
  bottom: 0;
  left: 0;
  width: var(--width);
  height: var(--thickness);
  clip-path: polygon(calc(var(--deviation) - 100px) calc(99px + 100%), calc(100% + 100px - var(--deviation)) calc(100px + 100%), calc(100% - 100px - var(--deviation)) calc(100% - 100px),  calc(100px + var(--deviation)) calc(100% - 100px));
}

<div class="wrapper">
  <div class="box outer">
    <h3>Margin</h3>
    <label class="side top">
            <input type="text" aria-label="margin top" />
        </label>
    <label class="side left">
            <input type="text" aria-label="margin left" />
        </label>
    <label class="side right">
            <input type="text" aria-label="margin right" />
        </label>
    <label class="side bottom">
            <input type="text" aria-label="margin bottom" />
        </label>
  </div>

  <div class="box-border">
    <div class="box inner">
      <h3>Padding</h3>
      <label class="side top">
                <input type="text" aria-label="padding top" />
            </label>
      <label class="side left">
                <input type="text" aria-label="padding left" />
            </label>
      <label class="side right">
                <input type="text" aria-label="padding right" />
            </label>
      <label class="side bottom">
                <input type="text" aria-label="padding bottom" />
            </label>
    </div>
  </div>
</div>

你可以考虑任何你想要的形状。只要确保它会像你想要的那样切割边，否则你没有任何限制。

您可以像下面这样优化您的代码。在您只需要更改包装器尺寸的情况下，它会更好地响应。

:root {
  font-size: 16px;
}

.wrapper {
  --deviation: 2px;
  --thickness: 1rem;
  --padding: 0.125rem;
  position: relative;
  width: 24rem;
  height: 10rem;
  margin: 2rem;
}

.box.outer {
  height: 100%;
}

.box-border {
  margin: calc(var(--thickness) + var(--padding));
  position: absolute;
  border: 1px solid;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box.inner {
  margin: var(--padding);
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
}

.box h3 {
  display:inline-block;
  margin: 0.125rem 0 0 calc(var(--thickness) * 1.2);
  font-size: calc(var(--thickness) / 1.5);
  line-height: 1;
  font-family: Helvetica;
  font-weight: 400;
  position: relative;
  z-index: 2;
}
.side {
  background-color: #facc99;
}
input {
  height: 1.5rem;
  width: 3rem;
  border: 1px solid #c0c0c0;
  border-radius: 0.125rem;
  text-align: center;
}
.side {
  position: absolute;
  display: flex;
  justify-content:center;
  align-items:center;
}
.side.left,
.side.right {
  top: 0;
  bottom: 0;
  width: var(--thickness);
}
.side.top,
.side.bottom {
  left: 0;
  right: 0;
  height: var(--thickness);
}
.side.left {
  left: 0;
  clip-path: polygon(-100px calc(-100px + var(--deviation)), -100px calc(100% + 100px - var(--deviation)), calc(100px - var(--deviation)) calc(100% - 100px), calc(101px - var(--deviation)) 100px);
}
.side.right {
  right: 0;
  clip-path: polygon(calc(100% + 100px) calc(var(--deviation) - 100px), calc(100% - 100px + var(--deviation)) 100px, calc(100% - 100px + var(--deviation)) calc(100% - 100px), calc(100px + 100%) calc(100% + 100px - var(--deviation)));
}
.side.top {
  top: 0;
  clip-path: polygon( calc(var(--deviation) - 100px) -100px, calc(100% - var(--deviation) + 100px) -100px, calc(100% - 100px - var(--deviation)) 100px, calc(100px + var(--deviation)) 100px);
}
.side.bottom {
  bottom: 0;
  clip-path: polygon(calc(var(--deviation) - 100px) calc(99px + 100%), calc(100% + 100px - var(--deviation)) calc(100px + 100%), calc(100% - 100px - var(--deviation)) calc(100% - 100px), calc(100px + var(--deviation)) calc(100% - 100px));
}

<div class="wrapper">
  <div class="box outer">
    <h3>Margin</h3>
    <label class="side top">
            <input type="text" aria-label="margin top" />
        </label>
    <label class="side left">
            <input type="text" aria-label="margin left" />
        </label>
    <label class="side right">
            <input type="text" aria-label="margin right" />
        </label>
    <label class="side bottom">
            <input type="text" aria-label="margin bottom" />
        </label>
  </div>

  <div class="box-border">
    <div class="box inner">
      <h3>Padding</h3>
      <label class="side top">
                <input type="text" aria-label="padding top" />
            </label>
      <label class="side left">
                <input type="text" aria-label="padding left" />
            </label>
      <label class="side right">
                <input type="text" aria-label="padding right" />
            </label>
      <label class="side bottom">
                <input type="text" aria-label="padding bottom" />
            </label>
    </div>
  </div>
</div>

输入溢出不可见

Input overflow not visible

css

clip-path