Писать код под градусом?
а так? https://jsfiddle.net/bc09otfk/12/
Не то. Это просто постоянная ширина рамок для любого размера контейнера. Задаётся просто пиксельной величиной.
У меня на примере с зелёными шкалами видите - если шкала увеличилась по минимальной стороне, то и рамки увеличились.
Я сформулировал своё требование простым правилом: ширина рамки должна быть столько-то процентов (скажем 10) от длины минимальной стороны. Это простой вариант, который можно реализовать с одним контейнером. А потом для усложнения (и чтобы было больше не шкалу похоже) добавил требования для разных цветов фона, заполнения и рамок шкалы. Реализовать это надо скорее всего двумя контейнерами.
Давайте более конкретно сформулирую:
- ширина рамки должна быть 10% от минимального размера контейнера (width or height);
- фон должен быть серым, рамка чёрной, заполнение зелёным;
- величиная заполнения 25%;
- без джаваскрипта.
Величина заполнения пока статическая - для тестов, чтобы видно было все три цвета.
Я сейчас в своей программе создаю эти элементы динамически, поэтому могу кодом посчитать значение рамки в зависимости от заданных ширины и высоты. Но надо сделать, чтобы она изменялась динамический при изменении рамеров контейнера. Чтобы не перехватывать разные события изменения размеров и не считать всё снова, надо сделать всё средствами чисто CSS и HTML. Чтобы браузер сам всё перехватывал и пересчитывал.
Не надо делать кучу контейнеров, как в вашем примере. У меня куча, потому что это картинка, где надо показать сразу многие варианты. На самом деле это один и тот же контейнер, только в разных случаях. Сделайте один контейнер, у которого можно менять размер (поместите его в какой-нибудь flex-container), и тогда, меняя размер вьюпорта, видно будет, как он себя ведёт.
Пипец, у меня какая-то утечка произошла - Студия выжрала 50+ гигов памяти, так что система в глубокий своп ушла... при установленных 64 ГБ. )))
Это просто постоянная ширина рамок для любого размера контейнера.
нет, там в зависимости от минимальной стороны. Код же есть играйтесь.
Если хочется чтобы изменялось сразу при размере окна, то нужно как то комбинировать с предыдущим примером.
Задача мне совершенно не нужная и больше времени инвестировать не хочется пока. 
без джаваскрипта.
расскажете когда получится "ширина рамки должна быть столько-то процентов от длины минимальной стороны."
без джаваскрипта.расскажете когда получится "ширина рамки должна быть столько-то процентов от длины минимальной стороны."
Вроде, в стили какие-то вычисления добавили через calc или что там. Я глянул мельком - по-моему не то. Нет доступа к контексту контейнера. Для контейнера используют запросы к контейнерам. Но всё это выглядит громоздкими костылями. Проще на скриптах или каком нормальном языке сделать.
и тогда, меняя размер вьюпорта,ну да для теста еще и размер менять
А как вы хотели? Всё должно быть динамическим, да ещё контейнеры должны быть вложенными. То, что на картинке, упрощённый вариант, как я раньше сказал. Точнее, это разные состояния одного и того же контейнера, а не куча разных контейнеров.
Ну, с кодом и я могу. А на чистых стилях, как я понял, не получится, даже используя все последние стилевые новинки?
Кстати, где объявлена переменная border-width?
Я так понимаю, это ИИ сделал, а не вы? Можно проще. И не надо городить кучу квадратиков этих. Как я сказал, достаточно одного, но правильно работающего. Вот, например
Меняем размер вью порта с рендером страницы и смотрим за поведением рамки. Не могу только избавить от полосы прокрутки вертикальной. И не пойму, нафига нужна
height: 100vh;
для body. Но без неё вообще ничего не показывает. Похоже, без явного указания размера всё просто сжимается в ноль.
Ну а вот со внутренней шкалой. Добавил в скрипт считывание свойства внешнего контейнера flex-direction. И если оно вертикальное, то выставлять высоту внутреннего контейнера, а если горизонтальное, то ширину. Меняя направление элементов во внешнем контейнере (например, row или row-reverse), можно управлять заполнением справа налево или слева направо.
https://jsfiddle.net/1ob37zge/
Блин, в этом мире всё приходится делать самому. Ни на кого нельзя положиться. 
А на чистых стилях, как я понял, не получится
чё? CSS это между прочим настоящий ЯЗЫК ПРОГРАММИРОВАНИЯ! на нем возможно даже операционную систему написать можно!
Вот например ЯваСкрипт, тоже язык программирования и на нём пишут код для процессоров, Embedded, перспективное направление!
Но тема то совсем не об этом, а о пользе алкоголя... я тут провёл исследования, вот и сейчас, сиська 1.2 Жигулёвского это хорошо! 
Вопросы и Ответы - Программируем калькулятор пособий для беженцев вместе.
Кстати, где объявлена переменная border-width?
Похоже вы уже нашли, в JS
Я так понимаю, это ИИ сделал, а не вы?
ну так попробуйте ему задать задание чтобы именно такое сделал.
Но конечно, его заставили такое сделать
Можно проще. И не надо городить кучу квадратиков этих.
Не знаю, кому как, для меня ваш вариант абсолютно не подходит.
но правильно работающего
Так там не размер рамки меняется...
Кстати, где объявлена переменная border-width?Похоже вы уже нашли, в JS
Нет, это же CSS-переменная. Она в стилях глобально должна быть объявлена. А её нет в объявлении в стилях.
но правильно работающегоТак там не размер рамки меняется...
Всё меняется - границы вью порта подвигайте. Рамка меняется, когда меньший из размеров контейнера меняется. Если сдвинуть левую границу вьюпорта максимально вправо, то шкала станет узкой, вытянутой по высоте. Меньший размер в этот момент - ширина. Толщина рамки равна 10% от ширины. Далее двигаем левую границу вьюпорта влево. По мере увеличиния ширины увеличивается и толщина рамки. Как только ширина стала не меньшим размером, толщина рамки начинает зависеть уже от высоты. Но т.к. мы двигаем левую границу вью порта, то высота шкалы не меняется. Значит, остановился и рост толщины рамки. Аналогично и с изменением по высоте.
Специально такое поведение придумал - уже объяснял, почему. Попробуйте дундуку ИИ это объяснить - хрен сделает. Хотя объяснение - в одну строчку (ширина рамки должна быть 10% от минимального размера контейнера). И смотрите, сколько мусора он вам понаписал - я заманался чистить (я ведь в JS плохо разбираюсь).
Она в стилях глобально должна быть объявлена.
не требуется, хотя можно
границы вью порта подвигайте
Ну вот поэтому и не переношу всего один элемент.
Далее двигаем левую границу вьюпорта влево. По мере увеличиния ширины увеличивается и толщина рамки
не замечаю , может мы о разных рамках говорим, я о белой.
И смотрите, сколько мусора он вам понаписал
не интересовало вообще и не вижу никакого мусора. Если это if (windowSize >= 1000) {, так это специально для теста чтобы хоть что то менялось
уже объяснял, почему
один фиг, так и не понял зачем.
назад
список