Как сделать срезанные углы css

Слой с одним отрезанным уголком

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

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

Рис. 1. Изображение уголка

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

Рис. 2. Цвета, используемые в изображении уголка

Пример 1. Создание слоя с уголком

Результат данного примера показан ниже (рис. 3).

Рис. 3.Вид слоя с уголком

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

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

Рис. 4. Изображение для создания уголка

Поскольку ширина слоя может зависеть от ширины окна браузера и разрешения монитора, т.е. заранее не известна, то рекомендуется намеренно увеличить ширину рисунка, например, до 1200 пикселов и более. Бояться, что появится горизонтальная полоса прокрутки не нужно, поскольку изображение используется как фон, и все лишнее будет «обрезано». Аналогично обстоит дело и с высотой, но здесь можно ограничиться значением около 500 пикселов.

Код останется прежним, за исключением того, что уберется цвет фона (пример 2).

Пример 2. Использование фонового рисунка

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

Источник

Css срезать угол div

Как реализовывается такие углы(левый верхний, правый нижний) на CSS?

3 ответа 3

Таких углов на CSS можно достичь с помощью свойств: border-

Код может не самый лучший, зато белую обводку можно сделать

Нашел ответ на вопрос в этой статье.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css border или задайте свой вопрос.

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459

Как срезать углы на css

Проблема

Срезание углов — это не только быстрый способ достичь цели, но и популярный вариант стилизации как в печатном дизайне, так и в веб-дизайне. Чаще всего он подразумевает обрезание одного или нескольких уголков контейнера под углом 45°. В последнее время, в связи с тем, что скевоморфизм начал сдавать позиции плоскому дизайну, этот эффект пользуется особенной популярностью. Когда углы срезаются только с одной стороны и каждый из них занимает 50% высоты элемента, это создает фигуру в форме стрелки, что также часто используется в оформлении кнопок и элементов навигации типа «хлебные крошки».

Однако в CSS все еще недостаточно инструментов для создания этого эффекта с помощью простых и понятных однострочных решений. Из-за этого многие разработчики склоняются к использованию фоновых изображений: либо закрывают срезанные углы треугольниками (на одноцветном фоне), либо создают весь фон с помощью одного или нескольких изображений, где углы уже срезаны. Очевидно, что такие методы совершенно негибкие, они сложны в сопровождении и увеличивают время ожидания вследствие дополнительных HTTP-запросов и общего размера файлов веб-сайта.

Пример веб-сайта, где срезанный угол (нижний левый у полупрозрачного поля Find & Book) отлично вписывается в дизайн

Решение

Одно возможное решение предлагают нам всемогущие градиенты CSS. Предположим, что нам требуется только один срезанный угол, скажем, нижний правый. Трюк в том, чтобы воспользоваться способностью градиентов принимать направление угла (например, 45deg ) и позиции границ перехода цвета в абсолютных значениях, которые не меняются при изменении габаритных размеров элемента, которому принадлежит фон. Из вышесказанного следует, что нам будет достаточно одного линейного градиента.

Мы добавим прозрачную границу перехода цвета для создания срезанного угла и еще одну границу перехода цвета в той же позиции, но уже с цветом, соответствующим фону. Код CSS будет следующим (для угла размером 15px ):

background: #58a;
background:linear-gradient(-45deg, transparent 15px, #58a 0);

Просто, не так ли? Результат вы видите на рисунке.

Технически первое объявление нам даже не требуется. Мы добавили его только в качестве обходного пути: если градиенты CSS не поддерживаются, то второе объявление будет проигнорировано, так что мы как минимум получим фон сплошного цвета. Теперь предположим, что нам требуются два срезанных угла, скажем, оба нижних. Это невозможно реализовать с помощью одного градиента, так что нам понадобятся два. Первой мыслью может быть нечто подобное:

background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0), linear-gradient(45deg, transparent 15px, #655 0);

Однако, это не работает. По умолчанию оба градиента занимают всю площадь элемента, так что они заслоняют друг друга. Мы должны уменьшить их, ограничив каждый из них половиной элемента с помощью background-size :
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0) right, linear-gradient(45deg, transparent 15px, #655 0) left;
background-size: 50% 100%;

Результат вы можете видеть на рисунке.

Результат вы можете увидеть на рисунке и убедиться, что он — наконец-то! — работает! Вы наверняка уже догадались, как применить этот эффект ко всем четырем углам. Вам потребуются четыре градиента и код, подобный следующему:

background: #58a;
background: linear-gradient(135deg, transparent 15px, #58a 0) top left,

linear-gradient(-135deg, transparent 15px, #655 0) top right,

linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,

linear-gradient(45deg, transparent 15px, #655 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

Искривленные срезанные углы

Превосходный пример использования искривленных срезанных углов на веб-сайте http://g2geogeske.com; дизайнер сделал их центральным элементом оформления: они присутствуют в навигации, в содержимом и даже в нижнем колонтитуле.
Вариация метода с градиентами позволяет создавать искривленные срезанные углы — эффект, который многие называют «внутренним радиусом рамки», так как он выглядит словно инвертированная версия скругленных углов. Единственное отличие заключается в использовании радиальных градиентов вместо линейных:
background: #58a;
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,

radial-gradient(circle at top right, transparent 15px, #58a 0) top right,

radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,

radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

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

Решение со строковым SVG и border-image

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

Аналогично, для изменения фонового цвета также необходимы четыре правки, а если учитывать резервное решение, то все пять; анимировать изменение величины срезанного угла невероятно сложно, а в некоторых браузерах вообще невозможно. К счастью, в зависимости от желаемого результата мы можем воспользоваться еще парой методов. Один из них подразумевает объединение border-image со строковым SVG-кодом, в котором и генерируются углы.

Зная, как работает border-image (если вам необходимо освежить эти знания в памяти, подсказку вы найдете здесь), можете ли вы уже представить, как должен выглядеть требуемый SVG-код?

Так как габаритные размеры для нас неважны ( border-image позаботится о масштабировании, а SVG-рисунки идеально масштабируются вне зависимости от габаритов — будь благословенна векторная графика!), все размеры можно приравнять к единице, для того чтобы оперировать более удобными и короткими значениями. Величина срезанного угла будет равна единице, и прямые стороны также будут равны единице. Результат (увеличенный для удобства восприятия). Код, необходимый для этого, показан далее:
border: 15px solid transparent;
border-image: 1 url(‘data:image/svg+xml,

Помимо этого, вы, вероятно, заметили, что теперь срезанные углы меньше, чем при использовании предыдущей техники, и это может поставить в тупик. Мы ведь задали ширину рамки, равную 15px! Причина в том, что в решении с градиентом эти 15 пикселов отсчитывались вдоль градиентной линии, которая перпендикулярна направлению градиента. Однако ширина рамки измеряется не по диагонали, а по горизонтали/вертикали.

Чувствуете, к чему я веду? Да-да, снова вездесущая теорема Пифагора, которую мы активно использовали здесь. Схема на рисунке должна прояснить ситуацию.

0,2″/>
’);
background: #58a;
Однако, как можно видеть, результат не совсем тот, которого мы ожидали.

Куда делись наши кропотливо срезанные углы? Не бойся, юный падаван, углы все так же на месте. Вы сразу же поймете, что произошло, если установите другой фоновый цвет, например #655.
Как демонстрирует рисунок ниже, причина, почему наши углы исчезли, кроется в фоне: тот фон, который мы выше определили, попросту заслоняет их. Все, что нам нужно сделать для устранения этого неудобства, — с помощью background-clip запретить фону подлезать под область рамки:
border: 20px solid transparent;
border-image: 1 url(‘data:image/svg+xml,

0,2″/>
’);
background: #58a;
background-clip: padding-box;

Теперь проблема решена, и наше поле выглядит точно так же, как раньше. К тому же на этот раз мы можем с легкостью изменить размер углов, внеся всего лишь одну правку: просто скорректируем ширину рамки. Мы можем даже анимировать этот эффект, потому что border-width поддерживает анимацию!

Например, мы используем радиальный градиент от цвета hsla(0,0%,100%,.2) до transparent. Осталось решить лишь одну небольшую проблему. Если border-image не поддерживается, то резервное решение не ограничится отсутствием срезанных углов. Из-за того что фон обрезан, пространство между краем поля и его содержимым уменьшится. Для того чтобы исправить это, необходимо для рамки определить тот же цвет, который мы используем для фона:
border: 20px solid #58a;
border-image: 1 url(‘data:image/svg+xml,

’);
background: #58a;
background-clip: padding-box;

В браузерах, где наше определение border-image поддерживается, этот цвет будет проигнорирован, но там, где border-image не работает, дополнительный цвет рамки обеспечит более изящное резервное решение. Единственный его недостаток — увеличение количества правок, необходимых для изменения фонового цвета, до трех.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/bevel-corners

Решение с обтравочным контуром

Хотя решение с border-image очень компактное и хорошо соответствует принципам DRY, оно накладывает определенные ограничения. Например, наш фон все так же должен быть либо целиком, либо хотя бы вдоль кромок заполнен сплошным цветом.

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

Помните свойство clip-path из секрета «Как сделать ромб»? Обтравочные контуры CSS обладают поразительным свойством: они позволяют смешивать процентные значения (с помощью которых мы указываем габаритные размеры элемента) с абсолютными, обеспечивая невероятную гибкость. Например, код обтравочного контура, обрезающего элемент до формы прямоугольника со скошенными углами размером 20px (если измерять по горизонтали), выглядит так:
background: #58a;
clip-path: polygon(
20px 0, calc(100% — 20px) 0, 100% 20px,
100% calc(100% — 20px), calc(100% — 20px) 100%,
20px 100%, 0 calc(100% — 20px), 0 20px);
Несмотря на краткость, в этом фрагменте кода принципы DRY не соблюдены, и это становится одной из самых больших проблем, если вы не используете препроцессор. В действительности этот код — лучшая иллюстрация принципа WET из всех решений на чистом CSS, представленных в этой книге, ведь для изменения размера угла здесь требуется внести целых восемь (!) правок.

С другой стороны, фон можно поменять с помощью только одной правки, так что у нас есть хотя бы это. Одно из преимуществ данного подхода — то, что мы можем использовать абсолютно любой фон или даже обрезать подменные элементы, такие как изображения. На рисунке показано изображение, стилизованное с использованием срезанных углов. Ни один из предыдущих методов не позволяет добиться такого эффекта. Помимо этого, свойство clip-path поддерживает анимацию, и мы можем анимировать не только изменение размера угла, но и переходымежду разными фигурами.

Все, что для этого нужно, — использовать другой обтравочный контур. Помимо многословности и ограниченной поддержки браузерами, недостатком этого решения является то, что, если мы не позаботимся о достаточно широкой забивке, текст также будет обрезан, так как при обрезке элемента его составляющие никак не учитываются. В противоположность этому метод с градиентом позволяет тексту просто выходить за границы обрезанных углов (ведь они всего лишь часть фона), а метод с border-image работает так же, как обычные рамки, — переносит текст на новую строку.

border-radius: 15px;
corner-shape: bevel;

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

box-shadow works v2″ >

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

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

Источник