Переполнение ввода не видно

ProgramBox

Переполнение ввода не видно

Post author:admin
Запись опубликована:23 сентября, 2022
Post category:Вопросы по программированию

#css #clip-path

#css #клип-путь

Вопрос:

Я пытаюсь создать инструмент для изменения полей / отступов, который выглядел бы примерно так 👇

И я смог зайти так далеко

Я полностью не показываю полные входные данные, переполнение на самом деле не работает, поэтому я немного потерялся.

Я сделал 2 блока, на каждой стороне которых есть комбинация label input , чтобы создать форму, которую я использовал 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>

1. Ваши поля ввода выше, чем метки, и путь клипа не может выходить за пределы исходных размеров элемента AFAIK, поэтому я не понимаю, как это должно было бы работать в первую очередь.

2. Я бы просто извлек входные данные из меток (добавил идентификаторы и атрибуты for, чтобы сохранить функциональность), а затем расположил их абсолютно в правильном положении — это устраняет любую связь между отсечением содержимого метки и тем, как отображаются поля ввода, для начала.

3. @CBroe путь клипа не может выходить за пределы исходных размеров элемента AFAIK —> он может, путь клипа принимает отрицательные значения и значение больше 100%. Интуитивно мы думаем, что элемент является границей, но это не так. Clip-path можно использовать для обрезки некоторых внешних стилей, таких как box-shadows.

Ответ №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>