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

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

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

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

@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

<!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

<!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, не загадывайте, а вдруг пригодится, я вот год назад тоже сам себя уговаривал: "Таблицы" - да ладно, ты чего динозавр что-ли??? А выходит - тока в путь....

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
		1
	Декоративный уголок 02.02.2018, 18:50. Показов 1511. Ответов 13 Метки нет (Все метки) Подумал может кому будет интересно попробовать реализовать такой вот декоративный уголок. Изображения использовать нельзя, при наведении рамка будет менять цвет. Миниатюры 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	03.02.2018, 10:41	3
	Сообщение от Qwerty_Wasd ИМХО - эстетично было бы в svg В svg не эстетично, а правильно... В Вашем методе есть изъян, не учитываете фон родительского блока... Можно конечно сделать ещё двумя фонами, которые менять при наведении, но в наше время svg рулит... 0

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

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

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

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

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

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

@aj17 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

Опции темы