【发布时间】：2020-11-25 06:23:10
【问题描述】：
我正在尝试创建一个工具来更改边距/填充，看起来像这样????
我能够做到这一点
我完全无法显示完整的输入，溢出并没有真正起作用，所以我现在有点迷路了。
我做了 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>【问题讨论】：
-
您的输入字段高于标签 - 并且剪辑路径不能超出元素 AFAIK 的原始尺寸，所以我不明白这应该如何工作地点。
-
我只会从标签中取出输入（添加 id 和属性，以保持功能），然后将它们绝对定位在正确的位置 - 这消除了剪辑之间的任何连接标签内容，以及输入字段的显示方式。
-
@CBroe a clip-path 不能超出元素的原始尺寸 AFAIK --> 它可以，clip-path 接受负值和大于 100% 的值.直觉上我们认为元素是边界，但它不是。 Clip-path 可用于裁剪一些外部样式，如 box-shadows。