Css уголок у блока

Css уголок у блока

На сайтах треугольники применяются сплошь и рядом как часть дизайна элементов, например, они служат указателем на какой-то объект, направляя внимание читателя в нужное место. Также треугольники выполняют декоративные функции, делая блоки, где они применяются, более изящными и современными. На рис. 1 показан пример использования треугольника в дизайне.

Рис. 1. Треугольники в веб-дизайне

Напрямую сделать треугольник средствами CSS нельзя, поэтому доступны два метода, позволяющих его добавить — через border и transform .

Использование border

Хотя границы, создаваемые через свойство border , напрямую не имеют отношения к треугольникам, именно border используется для этого наиболее часто. Если задать нулевую ширину и высоту элемента, а также установить достаточно толстую границу, то мы увидим набор из четырёх треугольников (рис. 2). Для наглядности границы на всех сторонах установлены разного цвета.

Рис. 2. Добавление border к элементу

Оставляя только нужную границу, а остальные делая прозрачными, мы получим треугольник нужного цвета (рис. 3).

Рис. 3. Элемент с прозрачными границами

В примере 1 показано добавление треугольника к блоку через псевдоэлемент ::after .

Пример 1. Блок с треугольником

Для абсолютно позиционированных элементов нулевую ширину и высоту указывать не обязательно.

За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в табл. 1.

Табл. 1. Возможные виды треугольников

Вид Стиль
border: 20px solid transparent; border-top: 20px solid green; border: 20px solid transparent; border-right: 20px solid green; border: 20px solid transparent; border-bottom: 20px solid green; border: 20px solid transparent; border-left: 20px solid green; border: 20px solid transparent; border-top: 20px solid green; border-right: 20px solid green; border: 20px solid transparent; border-right: 20px solid green; border-bottom: 20px solid green; border: 20px solid transparent; border-bottom: 20px solid green; border-left: 20px solid green; border: 20px solid transparent; border-left: 20px solid green; border-top: 20px solid green;

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

Треугольник можно делать и другой формы, если задать разную толщину границ. Так, код создания блока, показанного на рис. 4, приведён в примере 2.

Рис. 4. Острый треугольник

Пример 2. Острый треугольник

С помощью border мы получаем сплошные цветные треугольники, для создания рамки показанной на рис. 5 приходится идти на хитрость и накладывать один элемент поверх другого с небольшим смещением. Опять же здесь нам помогут псевдоэлементы :before и :after (пример 3).

Рис. 5. Рамка с уголком

Пример 3. Наложение треугольников

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

Читайте также:  Epson stylus photo r220 инструкция на русском

Использование трансформации

С помощью трансформации мы можем повернуть квадратный элемент на 45º и получить из него ромб. Это ещё не треугольник как таковой, поэтому нужную нам выступающую часть оставляем на виду, а остальное прячем за другим элементом (пример 4).

Пример 3. Трансформация

Результат данного примера показан на рис. 6.

Варианты оформления уголков и рамок у информационных блоков на CSS

В данной заметке показаны варианты оформления информационных блоков при помощи уголков и рамок. Например, загнутый уголок, ленточка на блоке, картинная рамка и другие.

Все примеры адаптивны и могут быть любой высоты и ширины.

Дата публикации: 2018-04-16

От автора: когда я увидел статью Криса по notched boxes, я вспомнил, что не так давно у меня была задача по CSS дизайну в кроссбраузерной форме, как показано ниже.

Очень похоже на notched boxes, только здесь углы вырезаны по дуге, и нам нужно обрезать только один угол в блоке. Давайте разберемся, как сделать с помощью CSS срезанные углы блока, как можно применить технику к нескольким углам, с какими проблемами столкнемся, и как их решить с или без кроссбраузерности.

Первоначальная идея: box-shadow!

Начинаем с блока:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Блоку можно указать размеры или позволить определять размер, исходя из его контента – неважно. Для простоты поставим max-width и min-height. Также добавим outline, чтобы видеть рамки.

Затем с помощью абсолютного позиционирования располагаем квадрат из псевдоэлемента ::before, чья длина края равна диаметру (или двум радиусам $r) выреза в углу. Зададим псевдоэлементу также красноватую box-shadow и какой-нибудь background (потом удалим), чтобы лучше видеть:

Что мы получаем:

Смотрится не очень круто… пока что! Превратим квадрат в диск, указав на нем border-radius: 50% и отрицательный радиус $r, чтобы центральная точка круга совпадала с точкой (0, 0) (верхний левый угол) родительского блока. На родительском блоке мы указали overflow: hidden, чтобы часть псевдоэлемента, вылезающая за пределы .box, обрезалась.

Мы получили нужную фигуру:

Но это все еще не то, что мы хотим. Для достижения цели мы используем четвертое значение свойства box-shadow: spread radius. Можете освежить память по работе четырех значений свойства box-shadow:

box-shadow works v2" >

Вы могли догадаться, что мы сделаем дальше. Мы удалим наш фейковый background, обнулим первые три значения box-shadow (смещения по Х и У и радиус размытия), а в последнее значение укажем большое число (радиус распространения):

Интерактивное демо ниже показывает, как увеличение радиуса распространения захватывает все больше своего родителя .box:

Трюк заключается в том, чтобы радиус распространения точно покрывал остальную часть родителя. Что хорошо, мы можем сделать box-shadow полупрозрачной или скруглить углы на родителе .box:

Читайте также:  Hdmi self adaptation что это

Как Крис заметил в статье по notched boxes, радиус среза можно положить в переменную и легко изменять его через JS. Затем все красиво обновляется, даже с текстом в нашем блоке:

С текстовым контентом необходимо задать отрицательный z-index на псевдоэлементе ::before и явно поместить его в угол, так как теперь у нас есть padding на .box для компенсации среза.

Применение этой техники

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

Используемая структура довольно простая. Просто
и следом теги article, сгенерированные в цикле Pug:

К body применяем Flexbox макет с переносом элементов, очень широкий header и 1 или 2 элемента article в строке (зависит от вьюпорта).

Если в каждой строке всего один article, у нас не будет срезанных углов, поэтому их радиус равен 0px. В противном случае этот радиус –r задается в ненулевое значение.

Разберем ситуацию, когда в строке 2 тега article (и, конечно, у них срезанные углы, нам ведь это и нужно).

У первого тега самая левая точка диска должна находится на одном уровне с правой гранью родителя (left: 100%). Чтобы сдвинуть координату Х центральной точки диска к правой грани родителя, необходимо вычесть радиус диска, что дает нам left: calc(100% — var(—r)). Но центр не должен располагаться вдоль правой границы, он должен быть свещен с помощью margin $m тега
. Так мы получаем финальное значение:

По оси У начнем с того, что передвинем самую верхнюю точку диска на пересечение а нижней границей родителя — top: 100%. Чтобы переместить центральную точку диска на нижнюю грань родительского блока, необходимо передвинуть фигуру на 1 радиус, что даст нам top: calc(100% — var(—r)). Нам также нужно сместить центральную точку на $m вниз от нижней грани родителя. Так мы получаем финальный сдвиг:

Для второго article (второй на той же строке) значение вертикального сдвига не изменится.

По горизонтали же необходимо сдвинуть самую левую точку диска на пересечение с левой гранью родителя — left: 0%. Чтобы переместить центральную точку диска на пересечение с левой гранью родителя, необходимо сдвинуть фигуру влево на один радиус —r (left: calc(0% — var(—r))). Финальная позиция – смещение $m влево от левого родительского края:

Для третьего article (первый во второй строке) значение сдвига по оси Х совпадает с первым тегом.

По вертикали необходимо сдвинуть фигуру так, чтобы самая верхняя точка диска оказалась на пересечении с верхней гранью родителя — top: 0%. Чтобы сдвинуть центральную точку диска на пересечение с верхним краем родителя, необходимо сдвинуть фигуру на один радиус —r (top: calc(0% — var(—r))). Но нам нужно добавить еще $m, поэтому финальный верхний сдвиг:

Читайте также:  Cryorig h7 quad lumi

У последнего тега (второй во второй строке) значение горизонтального сдвига совпадает с тем, который расположен над ним, а значение вертикального сдвига – с тем, который слева от него на той же строке.

Сдвиги можно записать следующим образом:

Это значит, что позиции центральных точек дисков зависят от расстояния между article (это расстояние равно двойному margin: $m, заданному для article), радиусом дисков r и нескольких горизонтальных и вертикальных множителей (—I и —j). Изначально оба множителя равны -1.

Для первых двух article (на первой строке сетки 2х2) изменим вертикальный множитель —j на 1б так как координата У центральных точек дисков должна быть ниже нижней грани, а для нечетных тегов (в первой колонке) мы меняем горизонтальный множитель –i на 1, так как координата Х должна быть правее правого края.

Для первых двух article мы имеем только видимые вырезы в виде дисков на теге section. Для оставшихся – вырезы на h3. Поэтому для первых двух article радиус —r псевдоэлемента ::before заголовка равен 0. Для последних двух радиус равен 0 для псевдоэлемента ::before секции:

Точно так же добавляем разные padding дочерним тегам article:

Мы получаем, что хотели:

Демо сверху работает во всех текущих версиях основных браузеров. Если подобрать значения вместо CSS переменных, можно добавить поддержку вплоть до IE9.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Потенциальные проблемы описанного метода

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

Во-первых, для всех обрезаемых углов нужны псевдоэлементы. Поэтому если нужно срезать все углы, придется вводить дополнительный элемент. Грустно.

Во-вторых, мы не всегда хотим иметь однотонный background. Нас может заинтересовать полупрозрачный фон (что сделать очень сложно, если срезанных углов более одного), градиентный (можно эмулировать радиальный градиент с помощью box-shadow, но решение далеко от идеального) или вообще background с изображением (сложно реализуемо, единственный выход — mix-blend-mode – но он отрезает поддержку Edge безе элегантного фолбека).

А что делать с очень большими блоками, которым недостаточно радиуса распространения? Эмм. Рассмотрим другие, более надежные подходы с разной степенью поддержки в браузерах.

Гибкость и хорошая поддержка в браузерах? SVG!

Наверное, не удивительно, но полное решение SVG лучше всего подходит, если нам нужно что-то гибкое и надежно кроссбраузерное. Решение заключается в том, что нужно использовать SVG элемент перед контентом блока. Этот SVG содержит circle с заданным нами атрибутом радиуса r.

Ссылка на основную публикацию
Adblock detector