CSS-формы: автоматическая адаптация размера треугольника к тексту внутри него - PullRequest
Новая
       31

CSS-формы: автоматическая адаптация размера треугольника к тексту внутри него

1 голос
/ 20 мая 2019

Я пытаюсь поместить текст в треугольник с фиксированным наклоном, используя CSS Shapes, и мне нужно, чтобы треугольник адаптировался к длине текста. Если контейнер треугольника недостаточно широк, он должен превратиться в трапецию. Кроме того, он не должен быть больше, чем нужно. Однако я постоянно создаю переполнение или ненужные пробелы.

желаемый результат с коротким текстом желаемый результат с длинным текстом

Как рекомендовано в другом месте, я использую плавающие элементы, чтобы придать тексту форму. Кроме того, я установил display:grid на родительском элементе, чтобы получить доступ к высоте треугольника, чтобы разместить второй вырез внизу. Для этого кода я заменил текст на поля, чтобы сделать пробелы / переполнение более заметными. Кроме того, clip-path еще не применено.

Первая попытка использовала один Float: 

<div class="container">
  <div class="triangle">
    <div class="cutter"></div>
    <div class="content">      
      <span class="item"></span><span class="item"></span>[...]
    </div>
  </div>
</div>

html{
  --width: 40em;
  --incline: 0.2;
}
.container{
  border: 1px solid black;
  width: var(--width);
  display:grid;
}
.triangle{

}
.cutter{
  float: right;
  width: 100%;
  height: 100%;
  background-color: #0f08;
  shape-outside: var(--shape);
  clip-path: var(--shape);
  --shape: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%,
    100% calc(100% - var(--incline) * var(--width)),
    100% calc(var(--incline) * var(--width)));
}

.item{
  display: inline-block;
  width: 10em;
  height: 5em;
  background-color: beige;
  border: 1px solid red;
}

CodePen: краткое содержание ; длинное содержание

Эта версия надежно создает переполнение, возможно потому, что при определении высоты элемента / ячейки сетки предполагается, что 100% -ная высота поплавка равна нулю.

Таким образом, во втором варианте я разделил нож на три части: верхний и нижний треугольные вырезы и средний, чтобы раздвинуть треугольники. 

<div class="container">
  <div class="triangle">
    <div class="top cutter"></div>
    <div class="middle cutter"></div>
    <div class="bottom cutter"></div>
    <div class="content">
      <span class="item"></span><span class="item"></span>[...
    </div>
  </div>
</div>

html{
  --width: 40em;
  --incline: 0.2;
}
.container{/*same as above*/}
.cutter{
  float: right;
  width: 100%;
}
.cutter.top{
  height: calc(var(--incline)*var(--width));
  shape-outside:polygon(0% 0%, 100% 0%, 100% 100%);
  clip-path:polygon(0% 0%, 100% 0%, 100% 100%);
  background-color: #0f08;
}
.cutter.middle{
  height: calc(100% - 2 * var(--incline) * var(--width));
  shape-outside: polygon(100% 0%, 100% 100%);
  background-color: #0ff4;
}
.cutter.bottom{
  height: calc(var(--incline) * var(--width));
  background-color: #00f8;
  shape-outside: polygon(100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}
.item{/*same as above*/}

CodePen

Здесь проставка, по-видимому, игнорируется во время определения высоты, поэтому в этой фазе нижний треугольник пересекается слишком рано, т. Е. С текстом - неправильный абзац. В моих тестах это имеет тенденцию производить лишние пробелы, если, например, при определении высоты нижний треугольник оказывается в промежутке между двумя абзацами, может произойти переполнение.

Кроме того, этот подход не позволяет ножам пересекаться, что приводит к минимальному размеру.

Поскольку я опасаюсь, что единственное безопасное решение только для CSS - это обрезка только верха, я попробовал немного JavaScript: Наивная версия увеличения / уменьшения высоты треугольников до достижения границы между переполнением и отсутствием переполнения работает, но это очень кстати. к снижению производительности браузера (т.е. появилось сообщение «Эта вкладка замедляет работу браузера»). Если установить для треугольника style.height значение scrollHeight, это приведет к появлению лишних пробелов, особенно если перед последним блоком / словом требуется только один пиксель.

Какие-нибудь советы о том, что я должен попробовать с CSS? Или какие-нибудь предложения по более интеллектуальному алгоритму JS?

Кстати, я в порядке с решением, работающим только в самых последних версиях Chrome и Firefox.

...