Как добавить сложный border-radius внутри блока?

Question

[Cheizer]

Друзья, подскажите пожалуйста, как можно реализовать такой бордер как на скрине? Углы самого блока есть решение одно https://codepen.io/Cheizer/pen/qBWYxWa

Но вот как можно с бордером такое сделать внутри?

Answer 1

[Lord_Dantes]

Картинкой фон и background-size: cover;

Comments

[Cheizer]

нет, сейчас такое решение не подойдет, все адаптивно должно быть. У картинки будет искажение при трансформации.

[Rustam Bainazarov]

Роман Кузнецов, ну вам в любом случае картинками это надо делать. Двумя штуками. Один квадрат — уголок. Вторая — полоса.

Я такое делал на абсолютно позиционированных блоках внутри родителя.

Но есть htmlbook.ru/css/border-image. Я им ни разу не пользовался. Там можно одной сделать.

[Cheizer]

Рустам Байназаров, сам блок уже сделан без картинок, думаю как то можно и бордер такой сделать на CSS. картинками то просто. спасибо. А вот на HTML + CSS у меня ума не хватает пока.

[Rustam Bainazarov]

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

[Lord_Dantes]

Роман Кузнецов, есть вариант в теории:
Сделать внутри этого блока 4 дива и абсолютно отпозиционировать по сторонам типо сверху слева, справа и т.д

Далее родителю прописать overflow: hidden, а остальные сделать кругами с такой же обводкой похожей.

[Cheizer]

slave, да, это мой единственный вариант который я знаю, с before и after сделать дивы. И фоном класть SVG или PNG по углам.

[Lord_Dantes]

Роман Кузнецов, вот пример. https://codepen.io/lord-dantes/pen/rNBvXqg

[Рома Зварич]

slave, спасибо за пример. Очень полезный

Роман Кузнецов , Вам удалось применить его для своего примера? Мне вот пришлось неслабо повозиться, чтобы понять предложенную идею. Хотя способ оказался достаточно простым (что не делает его хуже). Я обновил свой ответ.

[Cheizer]

Спасибо!

Answer 2

[Рома Зварич]

Результат:

https://codepen.io/hisbvdis/pen/QWLxjvN

Comments

[Cheizer]

Спасибо, но все таки не подходит для адаптивного блока, искажение рисунка идет.

[Рома Зварич]

Роман Кузнецов, искажение какого рисунка?

[Cheizer]

Рома Зварич, на углах, самое главное и самое сложное. Если сделать ширину блока в 100% и потянуть.

[Рома Зварич]

Роман Кузнецов, а так?
Проверяйте
https://codepen.io/hisbvdis/pen/QWLrejq

[Рома Зварич]

Блин. Засечки немного получились на гранях. Сейчас попробую подправить

[Рома Зварич]

Роман Кузнецов, проверяйте

https://codepen.io/hisbvdis/pen/QWLrejq

[Cheizer]

Рома Зварич, Спасибо. но все же как сделать это бордером, внутри блока?

https://codepen.io/Cheizer/pen/qBWYxWa

Смысл в этом.

[Рома Зварич]

Роман Кузнецов, так Вам не конкретно эта рамка нужна, а просто скругления такие, да?

[Cheizer]

Рома Зварич, да, просто такая форма углов дурацкая, border-radius в обратную сторону. Если у блока есть решение, с помощью background:linear-gradient и background-image: radial-gradient, то как бордер в этот блок сделать так же непонятно :( боюсь рисунками придеться.

[Cheizer]

Спасибо!