Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Скошенные углы и отрицательные радиусы границ с использованием градиентов CSS3

20 января 2016 | Опубликовано в css | Нет комментариев »

В этом уроке мы расскажем, как создать скошенные углы и сымитировать отрицательные радиусы границы без использования изображений, только с помощью градиентов CSS. Удивительно, сколько всего можно создать, используя градиентов.

 

 


Основная задача — создать четыре градиента, каждый из которых занимал бы четверть  элемента: один в левом нижнем углу, один в правом нижнем углу, один в правом верхнем углу, один в левом верхнем углу. После этого задать фон как четыре линейных градиента с одними и теми же остановками цвета, в нашем случае расстояние от угла выбрано 10px*, так что до 10px идет прозрачный фон, а после 10px – нужный цвет, только углы у градиентов разные — 45, 135, 225 и 315 градусов соответственно.

*На самом деле расстояние от угла получается не 10px, а длина гипотенузы равнобедренного треугольника, т. е., примерно 14px.

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

Посмотрите, как это выглядит:

Демонстрация работы

Код HTML

<div><p>The main idea is to have 4 gradients that each occupy a quarter of the element's area (one for the bottom left, one for the bottom, on of the top right and one for the top left). Then you set the background to 4 linear gradients with the same color stops (in this case we wanted the corner size to be 10px*, so it was transparent <strong>until</strong> 10px and then the color we want <strong>from</strong> 10px) except the corners that are 45deg, 135deg, 225deg and 315deg respectively.</p>
    <p><small>*Actually not exactly 10px, it's the length of the hypotenuse of an isosceles right-angled triangle, which is around 14px</small></p></div>
<div class="round">By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).</div>

Код CSS

/** * Скошенные углы и отрицательные радиусы границы с использованием градиентов CSS */

div {
        background: #c00; /* обходной путь для старых браузеров */
        background:
                linear-gradient(135deg, transparent 10px, #c00 0) top left,
                linear-gradient(225deg, transparent 10px, #c00 0) top right,
                linear-gradient(315deg, transparent 10px, #c00 0) bottom right,
                linear-gradient(45deg,  transparent 10px, #c00 0) bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
}

div.round {
        background-image:
                radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
                radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
                radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
                radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}

/* Не обращайте внимание на код CSS ниже, он используется, чтобы пример смотрелся лучше */
body {
    background: #444 url('http://lea.verou.me/ft2010/img/darker_wood.jpg') bottom;
    font-family: sans-serif;
}

div {
    width: 500px;
    margin:15px auto;
    padding:13px 15px;
    color: white;
    line-height:1.5;
}
p:first-of-type { margin-top: 0 }
p:last-of-type { margin-bottom: 0} 

У нашего примера также есть обходной путь в виде одноцветного фона для старых браузеров, не поддерживающих градиенты CSS. Все будет работать, как задумано, во всех современных версиях браузеров и во многих старых версиях браузеров, таких как Firefox от версии 3,6, Chrome, Safari, Opera и Internet Explorer от версии 10.

Автор урока Lea Verou

Смотрите также:




Коментарии запрещены.