X
Юрий Немец

Загинаем угол на CSS3

В этом уроке мы создадим эффект загнутого угла без использования изображений и дополнительной разметки. Данный эффект будет хорошо работать во всех современных браузерах.

Пример данного эффекта можно увидеть здесь:

Посмотреть примерСкачать

Браузеры, которые полноценно поддерживают данный эффект: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.



HTML часть

Код HTML очень простой, мы помещаем текст внутри блока <div> с классом note:

1
2
3

<div class="note">
    <p>Текст блока</p>
</div>


CSS часть

Сперва нам для блока необходимо сделать позиционирование relative, чтобы мы могли внутри позиционировать другие элементы:

1
2
3
4
5
6
7
8
9

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

А сейчас, собственно, «загнем» угол нашего блока:

1
2
3
4
5
6
7
8
9
10
11

.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;
}

И добавим тень:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.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; /* Это свойство для того чтобы Firefox 3.0 правильно отображал позиционирование */
    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);
}

Вот мы и создали простой эффект загнутого угла. В примерах есть блок с закругленными углами. Делается это следующим образом:

1
2
3
4
5

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


Вывод

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


Успехов!

Источник: nicolasgallagher.com

Категории: CSS3