CSS — эффект загнутых уголков

CSS - эффект загнутых уголков Давайте попробуем сделать блоки с загнутыми уголками, не используя для этого никаких картинок.Использовать для этого мы будем псевдо-элемент :beforeРаботать код будет в следующих браузерах: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+ Итак, начнем.
1. Код блока в html
Code<div class=»note»>Блок с загнутым уголком зеленого цвета</div>
Далее все действия делаются в CSS
2. Задаем стили для класса note
Code.note {
  position:relative;
  width:30%;
  padding:1em 1.5em;
  margin:2em auto;
  color:#fff;
  background:#97C02F;
}
3. А теперь добавляем сам уголок
Code.note:before {
  content:»»;
  position:absolute;
  top:0;
  right:0;
  border-width:0 16px 16px 0;
  border-style:solid;
  border-color:#658E15 #fff;
}
Задается он с помощью псевдоэлемента before , который позволяет наложить сверху на блок дополнительный блок.
Наш блок представляет собой уголок 16 на 16 чуть более темного цвета, чем сам фон (#97C02F — фон,#658E15 — уголок, #fff — белый фон под уголком), расположенный в верхнем (top:0) правом (right:0) углу.
Уголок готов.
Но требуется еще небольшая доработка, чтобы уголок выглядел красиво в Firefox 3.0
Для этого добавляем код
Code
.note:before {
  …
  display:block;
  width:0;
}

На давайте не будет останавливаться на достигнутом и добавим легкую тень к уголку. Она будет видна не в каждом браузере, но зато там, где она будет работать, она добавить нашему уголку законченности.
Code
.note:before {
  .note:before {
  …
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
}

После всех этих настроек, мы получим следующий вид блока:

Блок с загнутым уголком зеленого цвета

А теперь сделаем этот блок с закругленными уголками.
Тогда его html-код будет

Code<div class=»note rounded»>Блок с загнутым уголком зеленого цвета с закругленными уголками</div>
А в CSS добавятся строки
Code
.note.rounded {
  -webkit-border-radius:5px 0 5px 5px;
  -moz-border-radius:5px 0 5px 5px;
  border-radius:5px 0 5px 5px;
}

.note.rounded:before {
  border-width:8px;
  border-color:#fff #fff transparent transparent;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius:0 0 0 5px;
  border-radius:0 0 0 5px;
}

После всех этих настроек, мы получим следующий вид блока:

Блок с загнутым уголком зеленого цвета с закругленными уголками

А итоговый код в CSS пример вид

Code
.note {

  position:relative;
  width:480px;
  padding:1em 1.5em;
  margin:2em auto;
  color:#fff;
  background:#97C02F;
  overflow:hidden;
}

.note:before {

  content:»»;
  position:absolute;
  top:0;
  right:0;
  border-width:0 16px 16px 0; /* размеры уголка */
  border-style:solid;
  border-color:#fff #fff #658E15 #658E15; /* цвет уголка и фона под ним */
  background:#658E15;  
  display:block; width:0; /* только для Firefox 3.0 */

  /* не обязательно: тень */

  -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
  /* не обязательно и работает не во всех браузерах: закругленные уголки */
.note.rounded {

  -webkit-border-radius:5px 0 5px 5px;
  -moz-border-radius:5px 0 5px 5px;
  border-radius:5px 0 5px 5px;
}
.note.rounded:before {

  border-width:8px; /* Triggers a 1px ‘step’ along the diagonal in Safari 5 (and Chrome 10) */
  border-color:#fff #fff transparent transparent; /* Avoids the 1px ‘step’ in webkit. Background colour shows through */
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius:0 0 0 5px;
  border-radius:0 0 0 5px;
}

Переведено с сайта: http://nicolasgallagher.com/pure-css-folded-corner-effect/

Комментарии на Facebook