Загибаем уголки

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

Как обычно создаем цветной блок. Добавляем свойство position:relative для абсолютного позиционирования псевдо-элементов.


.block {
    position:relative;
    width:300px;
    height: 100px;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#97C02F;
}

Переходим к созданию уголка при помощи псевдо-элемента, который позиционируется в верхнем углу прямоугольника. Псевдо-элемент не имеет ширины и высоты, но у него задана толстая обводка. Изменяя толщину обводки, мы будем изменять размер загнутого уголка.

Верхняя и правая части обводки имеют цвета, которые соответствуют цвету фона родительского прямоугольника. Левая и нижняя части обводки имеют более темный цвет или более светлый по сравнению с цветом фона прямоугольника.


.block:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 16px 16px 0;
    border-style:solid;
    border-color:#658E15 #fff;
}

Если нужно изменить уголок с другой стороны, то нужно поменять свойство right на left и border-width.


.block3:before {
    ...
    left:0;
    border-width: 0 0 16px 16px;
}
Эффект отлично работает во всех современных браузерах и хорошо подходит для дизайна сайта с простыми цветовыми решениями.

Также можно добавить эффекты тени и закругленные уголки. Можно посмотреть детали в статье-источнике http://nicolasgallagher.com/pure-css-folded-corner-effect/.

Реклама