Как добавить гибкую и масштабируемую визуальную рамку из изображения? ⇐ CSS

[Anonymous]

Изображение здесь — всего лишь пример того, что я пытаюсь сделать. У меня есть контейнеры (левый, основной, правый), и мне нужна визуализированная граница, которую, я предполагаю, я сделаю с помощью какого-то изображения. Честно говоря, я понятия не имею, что они здесь использовали и как создать свою собственную версию с новым оформлением.
[img]https://i.stack.imgur. com/28742.png[/img]

Я создал изображение рамки, и теперь мой веб-сайт выглядит как нарезка ломтиками картофеля
Но после того, как я повозился с настройками, теперь он выглядит так это:


Сначала я использовал изображение рамки и просто добавил «рамку», как здесь:
[img]https://i. stack.imgur.com/SaiaM.jpg[/img]

При реализации на сайте это выглядело так:


Это выглядело так, что, я думаю, не так уж и ужасно и больше соответствует моему цель. Я добавил эту строку в свой index.html, чтобы получить изображение выше:

Код: Выделить всё

border-image: url("{{ url_for('static', filename='border.png')}}") 16 round;

Это было не то, чего я хотел, поэтому я зашел в фотошоп и создал border_top, _bottom, _left, _right, а затем попытался разрезать их, и, черт возьми, это пошло не так.
Изображение рамки:


Я перечисляю только один, но остальные такие же и разделены рядом.
Затем я попробовал это:

Код: Выделить всё

.container {
position: relative;
display: grid;
grid-template-columns: 1fr 3fr 1fr;  /*Adjust the fr units as per your design */
gap: 10px;
height: 100vh; /* Use the full height of the viewport */
}

.container::before,
.container::after {
content: '';
position: absolute;
pointer-events: none;
}

.container::before { /* Top and bottom border */
top: 0; right: 0; bottom: 0; left: 0;
height: 100%;
border: solid transparent;
border-width: 16px 0; /* Top and bottom borders */
background-repeat: round;
background-image: url('border_top.png'), url('border_bottom.png');
background-position: top, bottom;
background-size: 100% 16px; /* Scale to the container width */
}

.container::after { /* Left and right border */
top: 0; right: 0; bottom: 0; left: 0;
width: 100%;
border: solid transparent;
border-width: 0 16px; /* Left and right borders */
background-repeat: round;
background-image: url('border_left.png'), url('border_right.png');
background-position: left, right;
background-size: 16px 100%; /* Scale to the container height */

и в итоге у меня получилась приведенная выше фотография нарезки ломтиками картофеля. lol
Справедливое предупреждение: я НЕ знаю, что является стандартом для создания границ. Есть ли способ взять только текстуру высокого разрешения и превратить ее в рамку, или мне придется создавать рамку по точным размерам каждого .контейнера? Или? Я порылся в сети и увидел, что использование изображений в качестве границ проблематично, но это было сделано на изображении выше, поэтому я хотел бы попытаться получить что-то подобное на моем.
Всем помогите ценится. Для справки: я поигрался со всеми размерами в пикселях. Некоторые из них слегка меняют рисунок вафли, но, кажется, ничего не решает проблему.
Это мой index.html:

Код: Выделить всё

My RPG Game


.main-content {
position: relative;
border: 16px solid transparent;
/*border-image: url("{{ url_for('static', filename='border.png')}}") 16
round;*/
}
.main-content::before {
content: "";
position: absolute;
top: -16px;
left: 0;
width: 100%;
height: 16px;
background: url("{{ url_for('static', filename='border_top.png') }}")
repeat-x;
}
/* Bottom border */
.main-content::after {
content: "";
position: absolute;
bottom: -16px;
left: 0;
width: 100%;
height: 16px;
background: url("{{ url_for('static', filename='border_bottom.png') }}")
repeat-x;
}
.sidebar-left {
border: 16px solid transparent;
border-image: url("{{ url_for('static', filename='border.png')}}") 16
round;
}
.sidebar-right {
border: 16px solid transparent;
border-image: url("{{ url_for('static', filename='border.png')}}") 16
round;
}
/* Left border */
.sidebar-left::before {
content: "";
position: absolute;
top: 0;
left: -16px;
width: 16px;
height: 100%;
background: url("{{ url_for('static', filename='border_left.png') }}")
repeat-y;
}

/* Right border */
.sidebar-right::after {
content: "";
position: absolute;
top: 0;
right: -16px;
width: 16px;
height: 100%;
background: url("{{ url_for('static', filename='border_right.png') }}")
repeat-y;
}

Это мой полный стиль.css:

Код: Выделить всё

/* Reset margins and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Container for the entire layout */
.container {
position: relative;
display: grid;
grid-template-columns: 1fr 3fr 1fr;  /*Adjust the fr units as per your design */
gap: 10px;
height: 100vh; /* Use the full height of the viewport */
}

.container::before,
.container::after {
content: '';
position: absolute;
pointer-events: none;
}

.container::before { /* Top and bottom border */
top: 0; right: 0; bottom: 0; left: 0;
height: 100%;
border: solid transparent;
border-width: 16px 0; /* Top and bottom borders */
background-repeat: round;
background-image: url('border_top.png'), url('border_bottom.png');
background-position: top, bottom;
background-size: 100% 16px; /* Scale to the container width */
}

.container::after { /* Left and right border */
top: 0; right: 0; bottom: 0;  left: 0;
width: 100%;
border: solid transparent;
border-width: 0 16px; /* Left and right borders */
background-repeat: round;
background-image: url('border_left.png'), url('border_right.png');
background-position: left, right;
background-size: 16px 100%; /* Scale to the container height */
}

.sidebar-left,
.sidebar-right {
background-color: #806c50; /* Example color */
/* Add more styling */
}

.main-content {
border-top: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 16px solid transparent;
border-image-source: url('/static/border_top.png') 16 round,
url('/static/border_right.png') 16 round,
url('/static/border_bottom.png') 16 round,
url('/static/border_left.png') 16 round;
border-image-slice: 200;
border-image-repeat: repeat;
display: grid;
grid-template-rows: 1fr auto; /* Adjust the row sizes as needed
gap: 10px;*/
}

.chat {
background-color: #5c4838; /* Example color */
overflow-y: auto; /* If you want the chat to be scrollable */
/* Add more styling */
}

.inventory {
overflow-y: auto; /* Scrollable list of items */
/* Add more styling */
}

/* Responsive design */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr; /* Stack sidebars and content on smaller screens */
}

.sidebar-left,
.sidebar-right {
display: none; /* Hide sidebars on smaller screens, or adjust as needed */
}

.main-content {
border-image: none; /* Remove the border image on smaller screens if needed */
grid-template-rows: auto; /* Adjust layout for mobile */
}
}

Редактирование №1:
Хорошо, я исправил вид картофелерезки, но по сути я остался там, где был с самого начала.
Я закомментировал эту строку:

Код: Выделить всё

/*.container::before,
.container::after {
content: '';
position: absolute;
pointer-events: none;
}*/

Это выглядело так:
[img]https://i.stack. imgur.com/BZhFm.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/782 ... d-scalable