333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
|
|
1 | |
Декоративный уголок02.02.2018, 18:50. Показов 1509. Ответов 13
Метки нет (Все метки)
Подумал может кому будет интересно попробовать реализовать такой вот декоративный уголок. Изображения использовать нельзя, при наведении рамка будет менять цвет.
0
|
02.02.2018, 18:50 | |
Ответы с готовыми решениями:
13
Декоративный уголок у блока картинкой Декоративный input range Декоративный элемент у заголовка Декоративный элемент на прозрачном фоне |
dev - investigator
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
|
||||||
03.02.2018, 01:21 | 2 | |||||
aj17, ИМХО - эстетично было бы в svg. А если на чистом css, как-то так - песочница
0
|
03.02.2018, 10:41 | 3 |
В svg не эстетично, а правильно... В Вашем методе есть изъян, не учитываете фон родительского блока... Можно конечно сделать ещё двумя фонами, которые менять при наведении, но в наше время svg рулит...
0
|
dev - investigator
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
|
|
03.02.2018, 13:15 | 4 |
Fedor92, Согласен.
0
|
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
|
|
04.02.2018, 01:42 [ТС] | 5 |
Есть ещё идеи?)
0
|
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
|
|
04.02.2018, 13:28 [ТС] | 7 |
mrtoxas, задача на подумать не более, вариант выше не корректный, так как Fedor верно написал про фон...
0
|
dev - investigator
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
|
|||||||||||
04.02.2018, 22:24 | 8 | ||||||||||
aj17, Вам также предложили использовать SVG. Только вы не читали. К примеру - песочница
0
|
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
|
||||||
04.02.2018, 22:57 [ТС] | 9 | |||||
Qwerty_Wasd, напротив, все читаю, думал может у кого будут интересные идеи, естественно SVG на поверхности, интересует средствами CSS "на подумать" вот первое что в голову пришло:
1
|
dev - investigator
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
|
|
04.02.2018, 23:05 | 10 |
aj17, то же вариант. То же самое и предлгал только короче. Все что вам оставалось сделать запихнуть в обертку с overflow:hidden. И вот вам готовый модуль.
0
|
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
|
||||||
05.02.2018, 11:17 [ТС] | 11 | |||||
Qwerty_Wasd, к сожалению одного overflow:hidden в вашем примере было бы недостаточно...
Я уверен, мой пример не самый интересный, мне было просто любопытно посмотреть на разные варианты ) Добавлено через 12 часов 3 минуты Кому интересно, придумал ещё один вариант, на мой взгляд более изящный
1
|
dev - investigator
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
|
|
05.02.2018, 12:50 | 12 |
aj17, прелестно - сам спросил и сам ответил
С вашего позволения, "скомуниздю" последний вариант себе в копилочку.
0
|
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
|
|
05.02.2018, 13:17 [ТС] | 13 |
Qwerty_Wasd, вся фишка в том, что я не спрашивал) Мне даже некуда применить это...
Я просто предложил сделать, по скольку мне показалось это необычной практикой)
0
|
Qwerty_Wasd
|
05.02.2018, 13:21
Декоративный уголок
#14
|
Не по теме: aj17, не загадывайте, а вдруг пригодится, я вот год назад тоже сам себя уговаривал: "Таблицы" - да ладно, ты чего динозавр что-ли??? А выходит - тока в путь....
0
|
05.02.2018, 13:21 | |
При уменьшении окна декоративный элемент скачет Уголок закруглённый уголок Прозрачный уголок у блока Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |