Декоративный уголок

@aj17 · Регистрация: 02.06.2014

Студворк — интернет-сервис помощи студентам

Подумал может кому будет интересно попробовать реализовать такой вот декоративный уголок. Изображения использовать нельзя, при наведении рамка будет менять цвет.

Qwerty_Wasd · 03.02.2018, 01:21

aj17, ИМХО - эстетично было бы в svg. А если на чистом css, как-то так - песочница

CSS
1
2
3
div{position:relative;height:200px;width:100px;border:2px solid #0288D1;border-radius:5px;margin:50px auto;}
div::before{content:"";position:absolute;top:-14px;left:-15px;height:25px;width:25px;border-right:2px solid #0288D1;transform:rotate(45deg);background:#fff;}
div:hover,div:hover::before{border-color:#D81B60}

@Fedor92 · 03.02.2018, 10:41

Сообщение от Qwerty_Wasd

ИМХО - эстетично было бы в svg

В svg не эстетично, а правильно...

В Вашем методе есть изъян, не учитываете фон родительского блока... Можно конечно сделать ещё двумя фонами, которые менять при наведении, но в наше время svg рулит...

Qwerty_Wasd · 03.02.2018, 13:15

Fedor92, Согласен.

@aj17 · 04.02.2018, 01:42 **[ТС]**

Есть ещё идеи?)

@mrtoxas · 04.02.2018, 02:02

aj17, вам мало предложенных? Вставляйте картинкой и меняйте ее при наведении

@aj17 · 04.02.2018, 13:28 **[ТС]**

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

Qwerty_Wasd · 04.02.2018, 22:24

aj17, Вам также предложили использовать SVG. Только вы не читали. К примеру - песочница

HTML5
1
2
3
svg class="change-color" width="150" height="300">
  <g id="g4493"><path id="rect4485" d="M 90.794811,56.154297 75.521484,72.097751 v 98.572169 c 0,3.01303 2.438144,5.45313 5.451172,5.45313 h 50.853514 c 3.01303,0 5.45313,-2.4401 5.45313,-5.45313 V 61.607422 c 0,-3.013029 -2.4401,-5.453125 -5.45313,-5.453125 z m 0.467722,0.90625 h 40.563637 c 2.52731,0 4.54883,2.019562 4.54883,4.546875 V 170.66992 c 0,2.52731 -2.02152,4.54688 -4.54883,4.54688 H 80.972656 c -2.527312,0 -4.546875,-2.01957 -4.546875,-4.54688 V 72.565473 Z"/></g>
</svg>

CSS
1
2
svg{margin:100px;transform:scale(2);stroke:blue;stroke-width:3}
svg:hover{stroke:red;}

@aj17 · 04.02.2018, 22:57 **[ТС]**

Qwerty_Wasd, напротив, все читаю, думал может у кого будут интересные идеи, естественно SVG на поверхности, интересует средствами CSS "на подумать" вот первое что в голову пришло:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
 
        body {
            line-height: 1;
            font-family: Arial;
        }
 
        section {
            background: #fafafa;
            padding: 40px;
        }
 
        .wrap {
            background: #fafafa;
            width: 960px;
            margin: 0 auto;
            padding: 0 10px;
        }
 
        .box {
            width: 33.333%;
            height: 244px;
            overflow: hidden;
            border-radius: 10px;
            color: #0288D1;
        }
        
        .box:hover{
            color: green;
        }
 
        .header-item,
        .body-item {
            background-color: #fff;
        }
 
        .header-item {
            height: 44px;
            border-left: 4px solid currentColor;
            -webkit-transform: skewX(-45deg) translateX(22px);
            transform: skewX(-45deg) translateX(22px);
            position: relative;
            overflow: hidden;
        }
 
        .some-item {
            -webkit-transform: skewX(45deg) translateX(-22px);
            transform: skewX(45deg) translateX(-22px);
            position: absolute;
            bottom: 0;
            top: 0;
            right: 0;
            left: 0;
            border: 4px solid currentColor;
            border-width: 4px 4px 0 0;
            border-top-right-radius: 10px;
        }
 
        .body-item {
            border: 4px solid currentColor;
            border-top: 0;
            height: 200px;
            border-radius: 0 0 10px 10px;
        }
 
    </style>
</head>
 
<body>
    <section>
        <div class="wrap">
            <div class="box">
                <div class="header-item">
                    <div class="some-item"></div>
                </div>
                <div class="body-item"></div>
            </div>
        </div>
    </section>
 
 
</body>
 
</html>

Qwerty_Wasd · 04.02.2018, 23:05

aj17, то же вариант. То же самое и предлгал только короче. Все что вам оставалось сделать запихнуть в обертку с overflow:hidden. И вот вам готовый модуль.

@aj17 · 05.02.2018, 11:17 **[ТС]**

Qwerty_Wasd, к сожалению одного overflow:hidden в вашем примере было бы недостаточно...
Я уверен, мой пример не самый интересный, мне было просто любопытно посмотреть на разные варианты )

Добавлено через 12 часов 3 минуты
Кому интересно, придумал ещё один вариант, на мой взгляд более изящный

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
 
    body {
      background: #ccc;
    }
 
    .wrap {
      margin: 0 auto;
      width: 960px;
      padding: 0 10px;
    }
 
    section {
      padding: 40px;
    }
 
    .block {
      width: 33.333%;
      color: #0288D1;
    }
 
    .block:hover {
      color: green;
    }
 
    .block-header {
      position: relative;
      height: 50px;
      overflow: hidden;
      border-right: 4px solid currentColor;
      border-top-right-radius: 10px;
    }
 
    .block-some-item:after,
    .block-some-item,
    .block-header:before{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
 
    .block-some-item:after,
    .block-header:before {
      content: ' ';
      display: block;
      -webkit-transform: skewX(-45deg);
      transform: skewX(-45deg);
      margin: 0 -30px 0 23px;
      z-index: -1;
    }
 
    .block-some-item {
      margin: 4px 0 0 4px;
      border-top-right-radius: 6px;
      overflow: hidden;
    }
 
    .block-some-item:after,
    .block-body{
      background-color: #fff;
    }
 
    .block-header:before {
      background-color: currentColor;
    }
 
    .block-body {
      height: 250px;
      border: 4px solid currentColor;
      border-top: 0;
      border-radius: 0 0 10px 10px
    }
 
  </style>
</head>
 
<body>
  <section>
    <div class="wrap">
      <div class="block">
        <div class="block-header">
          <div class="block-some-item"></div>
        </div>
        <div class="block-body"></div>
      </div>
    </div>
  </section>
 
 
</body>
 
</html>

Qwerty_Wasd · 05.02.2018, 12:50

aj17, прелестно - сам спросил и сам ответил

С вашего позволения, "скомуниздю" последний вариант себе в копилочку.

@aj17 · 05.02.2018, 13:17 **[ТС]**

Qwerty_Wasd, вся фишка в том, что я не спрашивал) Мне даже некуда применить это...
Я просто предложил сделать, по скольку мне показалось это необычной практикой)

Qwerty_Wasd · 05.02.2018, 13:21

Не по теме:

aj17, не загадывайте, а вдруг пригодится, я вот год назад тоже сам себя уговаривал: "Таблицы" - да ладно, ты чего динозавр что-ли??? А выходит - тока в путь....

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130

	Декоративный уголок 02.02.2018, 18:50. Показов 1744. Ответов 13 Метки нет (Все метки) Подумал может кому будет интересно попробовать реализовать такой вот декоративный уголок. Изображения использовать нельзя, при наведении рамка будет менять цвет. Миниатюры 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	03.02.2018, 13:15
	Fedor92, Согласен. 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	04.02.2018, 01:42 [ТС]
	Есть ещё идеи?) 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	04.02.2018, 02:02
	aj17, вам мало предложенных? Вставляйте картинкой и меняйте ее при наведении 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	04.02.2018, 13:28 [ТС]
	mrtoxas, задача на подумать не более, вариант выше не корректный, так как Fedor верно написал про фон... 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	04.02.2018, 23:05
	aj17, то же вариант. То же самое и предлгал только короче. Все что вам оставалось сделать запихнуть в обертку с overflow:hidden. И вот вам готовый модуль. 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	05.02.2018, 12:50
	aj17, прелестно - сам спросил и сам ответил С вашего позволения, "скомуниздю" последний вариант себе в копилочку. 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	05.02.2018, 13:17 [ТС]
	Qwerty_Wasd, вся фишка в том, что я не спрашивал) Мне даже некуда применить это... Я просто предложил сделать, по скольку мне показалось это необычной практикой) 0

Qwerty_Wasd
	05.02.2018, 13:21
	Не по теме: aj17, не загадывайте, а вдруг пригодится, я вот год назад тоже сам себя уговаривал: "Таблицы" - да ладно, ты чего динозавр что-ли??? А выходит - тока в путь.... 0