Угловая рамка. Как сделать чтобы небольшая рамка была только по углам div-а?

Question

[Иван Ильясов]

Суть вопроса проста. Как сделать такую рамку силами css?

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/Bmdpqx

Вариант, где в css-переменных можно задать размеры блока, размеры и толщину рамок.
https://codepen.io/aliencash/pen/ppaxNE

Comments

[Иван Ильясов]

А как зафиксировать размер этих углов?

[Иван Ильясов]

При изменении размеров блока всё становится печально. А если, например, блок адаптивный? есть какое нибудь решение?

[Александр Логинов-Солоницын]

Использовать внутри 4 span, которые и будут уголками

[Иван Ильясов]

Александр Логинов-Солоницын, Это сложно. Спасибо за подсказки!
Нашел более простое решение.

[Андрей Федоров]

Иван Ильясов, вы что издеваетесь? Там же все размеры указаны - сейчас они в vw. Хотите фиксированные размеры - поменяйте на px. Хорошо, сейчас я обновлю решение, будет на custom properties, но боюсь вам это решение будет так же непонятно.

[Андрей Федоров]

Александр Логинов-Солоницын, усложняет html, несемантично.

[Иван Ильясов]

Андрей Федоров, ну вот увеличил, например, ширину блока.

div {
   width: 30vw;
}

и всё поехало..

[Александр Логинов-Солоницын]

Андрей Федоров, зато просто и понятно)
А семантичность тут не играет никакой роли)
Это ведь графическое представление.
Используют же иконочные шрифты или SVG. По Вашей логике они тоже усложняют верстку и являются несемантичными. Если прям так хочется семантичности, ставь aria-hidden="true".

[Андрей Федоров]

SVG можно, а лишние span'ы нельзя. Иконочные шрифты то же нельзя. Идеальный вариант - в html только семантика, все элементы дизайна - в css.

Answer 2

[Dima Polos]

Еще вот такой вариант: https://jsfiddle.net/pghypd8t/

Answer 3

[Иван Ильясов]

Нашел отличное решение тут: https://stackoverflow.com/questions/15414375/how-t...
Пример: https://jsfiddle.net/t80ve4xn/

Answer 4

[Mirlan Urzhanov]

Сделал псевдо-элементами
https://codepen.io/UMirlan/pen/vYxEKBP