Какие возможные варианты сделать такую кнопку, чтобы границы кнопок подстраивались под размер текста внутри?

Question

[MortSith]

Comments

[Полина]

Можно подсчитать по количеству символов длину кнопки + отступы. По этому размеру отрисовать динамически кнопку и хаполнить штриховкой боковую и нижние строны проекции. Заливку примерно так сделать

.striped-background {
    background: repeating-linear-gradient(
      -45deg,         /* угол наклона */
      white,          /* начало белого цвета */
      white 10px,     /* белая линия 10px */
      black 10px,     /* начало черной */
      black 15px      /* толщина черной 5px */
    );
  }

При этом если будете менять угол наклона, может появиться лесенка. Или сделать штриховку в svg

[imko]

а может просто повторящийся паттерн на фон да не мудрить?)

Answer 1

[Ivan Bogachev]

Где-то в светлом будущем у нас будет CSS Painting API, с помощью которого можно будет рисовать какие угодно бордеры. А пока можно его сымитировать обычным канвасом (правда придется отступы подгонять под особенности шрифта, но это уже детали, один раз можно сделать):



Рисование таких штуковин в реальном времени требует определенных вычислительных мощностей. Но если сравнивать с заранее заготовленными картинками, то мы получаем широкие возможности для кастомизации и рандомизации, что в каких-то случаях может быть очень кстати.

Answer 2

[Сергей delphinpro]

Есть вариант вообще ничего специально не делать. Кнопка и так будет подстраиваться под содержимое.

<button>Small</button>
<button>Very long text</button>
<button>Lorem ipsum dolor sit amet consectetur</button>

Comments

[MortSith]

смысл в том чтобы линии были кривые, как от руки нарисованы

[Сергей delphinpro]

MortSith, ну тогда вопрос должен звучать примерно так "Как мне стилизовать такую кнопку?"

Спрашиваете одно, нужно вам другое...

[Полина]

MortSith тогда динамически отрисовать скошенные параллелепипеды и использовать их как маски для готового фона.

Если кнопок немного разных видов, то не париться и сохранить нужные файлы svg как варианты подложки и потом выбрать и подгрузить нужную по длине.