Все примеры адаптивны и могут быть любой высоты и ширины.
Уголки с hover-эффектом:
Текст
1 2 3 4 5 |
<div class="corner-box-1"> <div class="corner-textbox-1"> Текст </div> </div> |
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 |
.corner-box-1 { display: inline-block; width: 300px; position: relative; border: 2px solid #337AB7; transition: all .3s ease; margin: 10px; } .corner-box-1:before, .corner-box-1:after { content: ""; z-index: 1; display: block; position: absolute; background: #FFF; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; } .corner-box-1:before { width: calc(100% + 4px); height: 80%; transition: height 0.6s; } .corner-box-1:after { height: calc(100% + 4px); width: 90%; transition: width 0.6s; } .corner-box-1:hover:before, .corner-box-1:focus:before { height: 50%; } .corner-box-1:hover:after, .corner-box-1:focus:after { width: 75%; } .corner-textbox-1 { padding: 30px; z-index: 2; position: relative; text-align: center; } |
Загнутый уголок:
Текст
1 2 3 |
<div class="corner-box-2"> Текст </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.corner-box-2 { position:relative; display: inline-block; width: 300px; margin: 10px 0 40px 0; padding: 30px; color: #fff; text-align: center; background: #337AB7; background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 30px 30px, linear-gradient(-135deg, transparent 20px, #337AB7 0); filter: drop-shadow(20px 30px rgba(0,0,0,0.1)); } .corner-box-2::before{ content: ' '; position:absolute; top: 30px; right: 0; background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,0.1) 0) 100% 0 no-repeat; width: 30px; height: 30px; transform: rotate(180deg) } |
Закругленные уголки:
Текст
1 2 3 4 5 |
<div class="corner-box-3"> <div class="corner-textbox-3"> Текст </div> </div> |
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 |
.corner-box-3 { display: inline-block; width: 300px; margin: 10px; background-color: #337AB7; position: relative; } .corner-box-3:before, .corner-box-3:after, .corner-textbox-3::before, .corner-textbox-3::after { content: ""; display: block; width: 20px; height: 20px; background-color: #FFF; position: absolute; } .corner-box-3:before { top: 0; left: 0; border-bottom-right-radius: 100%; } .corner-box-3:after { bottom: 0; right: 0; border-top-left-radius: 100%; } .corner-textbox-3 { padding: 30px; color: #FFF; } .corner-textbox-3:before { top: 0; right: 0; border-bottom-left-radius: 100%; } .corner-textbox-3:after { bottom: 0; left: 0; border-top-right-radius: 100%; } |
Аналогичный вариант, но с использованием радиального градиента, можно посмотреть в теме "Внутренний border-radius у блока"
Врезанные в фон уголки:
Текст
1 2 3 4 5 |
<div class="corner-4-box"> <div class="corner-4-textbox"> Текст </div> </div> |
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 |
.corner-4-box { display:inline-block; position: relative; width: 300px; margin: 30px; padding: 30px; background-color: #fff; background: linear-gradient(45deg, transparent 10px, #fff 10px), linear-gradient(315deg, transparent 10px, #fff 10px), linear-gradient(225deg, transparent 10px, #fff 10px), linear-gradient(135deg, transparent 10px, #fff 10px); background-position: bottom left, bottom right, top right, top left; background-size: 50% 50%; background-repeat: no-repeat; box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5); } [class*='corner-4-']::before, [class*='corner-4-']::after { content: ''; position: absolute; height: 20px; width: 80px; box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5); } .corner-4-box::before, .corner-4-box::after { top: -10px; } .corner-4-textbox::before, .corner-4-textbox::after { bottom: -10px; } .corner-4-box::before, .corner-4-textbox::before { left: -42px; } .corner-4-box::after, .corner-4-textbox::after { right: -42px; } .corner-4-box::before { transform: rotate(-45deg); } .corner-4-box::after { transform: rotate(45deg); } .corner-4-textbox::before { transform: rotate(-135deg); } .corner-4-textbox::after { transform: rotate(135deg); } |
Информационный уголок:
Текст
1 2 3 4 5 6 7 8 9 10 11 |
<div class="corner-box-5"> <div class="corner-icon-cont-5"> <span class="corner-icon-5">i</span> <div class="corner-textbox-5-2"> Текст - 2 </div> </div> <div class="corner-textbox-5"> Текст </div> </div> |
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 |
.corner-box-5 { display:inline-block; margin: 10px; width: 300px; border: 1px solid #ccc; border-radius: 3px; padding: 30px; overflow: hidden; position: relative; z-index: 2; } .corner-icon-cont-5 { color: #fff; } .corner-icon-cont-5:before { content: ''; height: 50px; width: 50px; transition: 0.5s ease; border-radius: 0 0% 100% 0; background: #337AB7; top: 0; left: 0; position: absolute; z-index: 1; } .corner-icon-cont-5:hover { width: 100%; height: 100%; } .corner-icon-cont-5:hover:before { border-radius: 0; width: 150%; height: 150%; transition: 0.5s ease; } .corner-icon-cont-5:hover .corner-icon-5 { top: -50%; left: -50%; transition: 0.5s ease; } .corner-icon-cont-5:hover .corner-textbox-5-2 { transition: 0.5s ease; top: 50%; left: 0; z-index: 4; } .corner-icon-5 { position: absolute; top: 0; left: 0; z-index: 3; transition: 0.8s ease; padding: 10px 16px; font-weight: bold; } .corner-textbox-5-2 { position: absolute; top: -200%; transform: translateY(-50%); transition: 0.4s ease; width: 100%; color: #fff; left: -200%; padding: 30px; } .corner-textbox-5 { text-align: center; } |
Уголок-ленточка:
лента
лента
Текст
1 2 3 4 5 6 7 8 9 |
<div class="corner-box-6"> <div class="corner-ribbon-6 corner-ribbon-6-top-left"> <span>лента</span> </div> <div class="corner-ribbon-6 corner-ribbon-6-top-right"> <span>лента</span> </div> Текст </div> |
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 |
.corner-box-6 { position: relative; display: inline-block; width: 300px; padding: 30px; margin: 10px; min-height: 160px; border: 2px solid #BFE2FF; text-align: center; } .corner-ribbon-6 { width: 150px; height: 150px; overflow: hidden; position: absolute; } .corner-ribbon-6::before, .corner-ribbon-6::after { position: absolute; z-index: -1; content: ''; display: block; border: 5px solid #2980b9; } .corner-ribbon-6 span { position: absolute; display: block; width: 225px; padding: 15px 0; background-color: #337AB7; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); color: #fff; font: 700 18px/1 'Lato', sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); text-transform: uppercase; text-align: center; } .corner-ribbon-6-top-left { top: -10px; left: -10px; } .corner-ribbon-6-top-left::before, .corner-ribbon-6-top-left::after { border-top-color: transparent; border-left-color: transparent; } .corner-ribbon-6-top-left::before { top: 0; right: 0; } .corner-ribbon-6-top-left::after { left: 0; bottom: 0; } .corner-ribbon-6-top-left span { right: -25px; top: 30px; transform: rotate(-45deg); } .corner-ribbon-6-top-right { top: -10px; right: -10px; } .corner-ribbon-6-top-right::before, .corner-ribbon-6-top-right::after { border-top-color: transparent; border-right-color: transparent; } .corner-ribbon-6-top-right::before { top: 0; left: 0; } .corner-ribbon-6-top-right::after { right: 0; bottom: 0; } .corner-ribbon-6-top-right span { left: -25px; top: 30px; transform: rotate(45deg); } |
Картинная рамка 1:
Текст
1 2 3 4 5 6 7 8 9 |
<div class="corner-box-7"> <div class="corner-frame-7-left"></div> <div class="corner-frame-7-right"></div> <div class="corner-frame-7-bottom"></div> <div class="corner-frame-7-top"></div> <div class="corner-textbox-7"> Текст </div> </div> |
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 |
.corner-box-7 * { box-sizing:content-box; } .corner-box-7 { position: relative; display: inline-block; width: 300px; padding: 20px; margin: 10px; text-align: center; } .corner-textbox-7 { padding:20px; } .corner-frame-7-top { top: 0px; left: 3px; width: calc(100% - 46px); border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #BFE2FF; position: absolute; } .corner-frame-7-left { top: 3px; left: 0px; width: 0px; height: calc(100% - 46px); border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #BFE2FF; position: absolute; } .corner-frame-7-bottom { bottom: 0; left: 3px; width: calc(100% - 46px); height: 0px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #BFE2FF; position: absolute; } .corner-frame-7-right { right: 0; top: 3px; width: 0px; height: calc(100% - 46px); border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid #BFE2FF; position: absolute; } |
Картинная рамка 2:
Текст
1 2 3 4 5 |
<div class="corner-box-8"> <div class="corner-textbox-8"> Текст </div> </div> |
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 |
.corner-box-8 { position: relative; box-shadow: 20px 20px 36px rgba(0,0,0,0.2); border: 11px solid #ededed; width: 300px; padding: 20px; margin: 30px; text-align: center; display: inline-block; } .corner-textbox-8:before { content: " "; position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; box-shadow: inset 10px 0 12px rgba(0,0,0,0.35); } .corner-textbox-8 { box-shadow: inset 0 0 10px rgba(0,0,0,0.2); background-color: #BFE2FF; border: 12px solid #f5f5f5; max-width: 100%; max-height: 100%; padding: 12px; display: flex; align-items: center; justify-content: center; flex-direction: column; } |
Приветствую хозяина ресурса. Пол часа не мог понять почему в 4 примере стили не применяются, а потом прикололся от не внимательности. У блоков классы corner-box-4, corner-textbox-4 а в стилях .corner-4-box, .corner-4-textbox :))
Спасибо за замечание, исправил
как в 1 убрать два уголка?
Какие именно?
Уголки сделаны по принципу, что на обычный бордюр накладывается белый (в цвет фона) крест, который закрывает центральную часть всех бордюров. А при ховере, этот крест уменьшается и соотв. показывается больше бордюра, создавая впечатление, что он увеличивается.
Задайте этому кресту черный цвет (чтобы было видно его) и экспериментируйте, двигая его куда угодно в начальном положении и при наведении мыши.
А на белом фоне как сделать?
Какой именно?
Супер!!
Спасибо, воспользовался загнутый уголок