Как обрезать геометрическую фигуру в css
Перейти к содержимому

Как обрезать геометрическую фигуру в css

  • автор:

Обрезка блоков в html

Пример

Как обрезать блоки так, как это показано на картинке? Я делал это через градиенты, но он получился не особо функциональным.

Отслеживать
задан 30 мая 2016 в 21:57
Tyler Maning Tyler Maning
313 1 1 золотой знак 3 3 серебряных знака 14 14 бронзовых знаков
Уточните, пожалуйста, что значит обрезать? Непонятно, что имеется ввиду.
30 мая 2016 в 22:26
Блок с цифрой обрезан в форме пятиугольника и необходимо сделать что-то подобное
30 мая 2016 в 22:27
Статья вам в помощь Геометрические фигуры на CSS
31 мая 2016 в 0:03

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Идея следующая: создаётся прямоугольник с нужным содержимым, к нему псевдоэлементом добавляется треугольник с нужной стороны. Строится треугольник через свойство border — длина бордера на каждой стороне форму треугольника.

В примере ниже выделил разными цветами для наглядности:

.main < width: 100px; height: 50px; background: tomato; /* основной цвет заливки фона */ >.main:after < content: ''; position: relative; top: 0; left: 100px; display: block; width: 0px; height: 0px; border: 25px solid transparent; border-left-color: pink; /* основной цвет заливки фона */ >

Отслеживать
ответ дан 31 мая 2016 в 7:10
5,542 3 3 золотых знака 21 21 серебряный знак 41 41 бронзовый знак

  • css
  • html5
  • css3
  • html
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

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

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Введение в CSS-фигуры

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

Но ситуация может измениться с введением новой спецификации CSS – фигур. CSS -фигуры впервые были реализованы в браузере Google Chrome версии 37.

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

Фигуры можно задавать вручную либо производить от рисунков.

Давайте рассмотрим создание фигур на простом примере.

Наверное, не я один был так наивен, впервые поместив на страницу изображение с прозрачным фоном в ожидании того, что контент заполнит прозрачные места. Представьте моё разочарование, когда этого не произошло, и очертания изображения остались прямоугольными! Но теперь у нас есть фигуры, и они помогут нам восстановить справедливость:

Lorem ipsum…

  • Создание фигур вручную
    • Функция circle()
    • Референсные блоки фигур CSS
    • Функция ellipse()
    • Функция polygon()
    • Функция inset()
    • Создание фигур из референсных блоков
    • Отступы фигуры
    • Анимирование фигур
    • Создание обтекания внутри фигуры
    • Отказоустойчивость и последовательное улучшение
    • Неоднозначности в именовании CSS-расширений
    • Инструменты для работы с CSS-фигурами
    • Заключение

.element

Директива shape-outside: url(image.png) говорит браузеру, чтобы он извлёк очертания фигуры из изображения.

Свойство shape-image-threshold задаёт минимальный уровень прозрачности, при котором пикселы будут участвовать в формировании фигуры. Значение этого свойства может изменяться в диапазоне от 0.0 ( полностью прозрачный ) до 1.0 ( полностью непрозрачный ).

В нашем примере shape-image-threshold: 0.5 означает, что только пикселы с прозрачностью 50% и меньше будут считаться составной частью фигуры.

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

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

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

Создание фигур вручную

Помимо извлечения фигур из прозрачных изображений, новое расширение CSS позволяет создавать фигуры вручную. Вы можете использовать функциональные атрибуты circle() , ellipse() , inset() и polygon() .

Каждая функция принимает в качестве параметров набор координат и функционирует в референсном блоке ( reference box ), задающем для фигуры начало координат. Мы ещё расскажем о референсных блоках чуть позже.

Функция circle()

Функция circle()

Полная нотация ( то есть формат свойства ) для круга выглядит как circle(r at cx cy) , где r – радиус круга, а cx и cy – положение центра круга на осях координат. Координаты центра круга можно опустить; тогда круг будет выстроен относительно центра родительского блока:

.element

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

Необходимо запомнить: CSS -фигуры задают только область обтекания вокруг элемента. Они не влияют на другие его свойства, например, на цвет фона. Чтобы обрезать фон, необходимо воспользоваться другим расширением CSS – маскированием.

К нему относятся свойства clip-path и mask-image . Последнее кажется особенно полезным, так как его нотация совпадает с нотацией CSS -фигур, и одни и те же параметры можно использовать дважды:

Функция circle() - 2

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

Но вернёмся к нашим фигурам.

Когда мы задаём радиус круга в процентах, его размер на самом деле вычисляется по несколько более сложной формуле:

sqrt(width^2 + height^2) / sqrt(2)

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

Координаты для фигур могут быть заданы в любых единицах, допустимых в CSS : px , em , % и так далее. Вы можете выбрать ту единицу, которая будет отвечать вашим нуждам.

Вы можете уточнить расположение центра круга, указав два значения после ключевого слова at :

.element

Позиция указывается относительно начала координат. Что это за координаты? Здесь уместно будет разъяснить понятие референсного блока.

Референсные блоки фигур CSS

Референсный блок – это виртуальный прямоугольник вокруг фигуры, который формирует систему координат для её отрисовки. За начало координат принимается верхний левый угол этого прямоугольника; при этом ось X направлена вниз, а Y – вправо:

Референсные блоки фигур CSS

Свойство shape-outside изменяет очертания области обтекания фигуры, вокруг которой будет располагаться контент. По умолчанию эта область у фигуры, как и у любого другого блока, распространяется вплоть до внешних краёв, заданных свойством margin .

Поэтому два ниже приведённых приёма приведут к одинаковым результатам:

.element< shape-outside: circle(50% at 0 0); /* идентично: */ shape-outside: circle(50% at 0 0) margin-box; >

Пока мы не задали элементу поля, мы можем рассчитывать на то, что начало координат и центр нашей фигуры находятся в одном и том же месте. С появлением полей всё меняется:

.element

Начало координат теперь лежит вне родительского блока ( а точнее, на 100 пикселей выше и на 100 пикселей левее ). Там же расположен и центр круга. Вычисленное значение радиуса также выросло, принимая во внимание увеличение поверхности, охватываемое системой координат, заданной margin-box :

Референсные блоки фигур CSS - 2

Можно выбрать свойство, задающее референсный блок, из нескольких вариантов: margin-box , border-box , padding-box и content-box . Их названия характеризуют очертания, по которым строится координатная сетка.

Что такое margin-box , мы уже знаем. border-box ограничен внешними краями рамки элемента, padding-box – заполнением, а content-box – поверхностью, которую занимает содержимое элемента:

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

Функция ellipse()

Функция ellipse()

Эллипс выглядит как сплющенный круг. Определение эллипса выглядит как ellipse(rx ry at cx cy) , где rx и ry – радиусы эллипса относительно осей X и Y , а cx и cy – координаты центра эллипса:

.element

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

Радиусы также можно указать при помощи ключевых слов: farthest-side будет означать расстояние от центра эллипса до самой дальней стороны референсного блока, а closest-side , соответственно – до ближайшей стороны:

.element< shape-outside: ellipse(closest-side farthest-side at 50% 50%); /* идентично: */ shape-outside: ellipse(150px 300px at 50% 50%); width: 300px; height: 600px; >

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

Эти же ключевые слова, кстати, могут быть использованы и при задании радиуса круга в функции circle() .

Функция polygon()

Функция polygon()

Если круги и эллипсы вам наскучили, функция создания многоугольной области наверняка займёт вас на более длительное время. Её формат: polygon(x1 y1, x2 y2, …) . В скобках вы должны задать пары координат для каждой вершины многоугольника. Минимальное количество пар – три, для треугольника:

.element

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

.element< /* polygon responsive to font-size*/ shape-outside: polygon(0 0, 0 100%, 100% 100%); width: 20em; height: 40em; >

Есть также необязательный параметр fill-rule , заимствованный из SVG , который управляет тем, как браузер определяет, что является « внутренней » поверхностью многоугольника, если его грани пересекаются.

Этот вопрос отлично разъясняет Джони Трифл в своей статье « Как применяется правило заполнения в SVG ». Значение fill-rule по умолчанию: nonzero:

.element< shape-outside: polygon(0 0, 0 100%, 100% 100%); /* идентично: */ shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%); >

Функция inset()

Функция inset() позволяет создать прямоугольную область, которую будет обтекать контент. Это кажется странным, ведь фигуры CSS , как мы уже говорили, изначально были предназначены для того, чтобы задавать не прямоугольное расположение для содержимого блоков. И это на самом деле странно!

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

Полный формат функции описывается так: inset(top right bottom left border-radius) . Первые четыре параметра задают расположение фигуры в системе координат. Пятый задаёт виртуальную рамку для фигуры, причём этот параметр может быть, как развёрнут согласно принятой в CSS нотации для border-radius , так и пропущен как необязательный:

.element

Создание фигур из референсных блоков

Если не указать аргумент-функцию в свойстве shape-outside , то браузер сам создаст фигуру на основе референсного блока. Референсным блоком по умолчанию является margin-box .

Пока ничего особенного, именно так до сих пор вели себя плавающие блоки. Но применение этой техники позволяет использовать очертания различных элементов. Для примера возьмём свойство border-radius .

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

Создание фигур из референсных блоков

.element

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

Создание фигур из референсных блоков - 2

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

А так можно добиться того же визуального эффекта, но добавив гибкость в размещении цитаты:

.pull-quote

Мы явно задали вид референсного блока и его положение в системе координат. В нашем случае объём цитаты определил фигуру, вокруг которой плавает основной контент. А свойство margin-top задало положение цитаты на странице независимо от её расположения в DOM -дереве.

Отступы фигуры

Обратите внимание, как близко плавающий контент примыкает к обтекаемому элементу. Добавить свободного пространства вокруг фигуры можно при помощи свойства shape-margin :

.element

Эффект подобен тому, который можно получить при использовании свойства margin , но разница состоит в том, что shape-margin действует только внутри shape-outside . Он добавит отступ только в том случае, если тот поместится в референсный блок. Именно поэтому радиус фигуры в нашем последнем примере составляет 40, а не 50%.

Если бы радиус был установлен по максимуму, для отступа не хватило бы места. Вообще говоря, фигура всегда ограничивается своим margin-box , и при выходе за его пределы просто обрезается по форме прямоугольника.

Также важно учитывать, что свойство shape-margin принимает в качестве аргумента только одно положительное значение. Его нельзя развернуть, как обычный margin . И в самом деле, какой shape-margin-top может быть у круга?

Анимирование фигур

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

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

Вы можете анимировать радиусы и расположение кругов и эллипсов, если они представлены в величинах, которые браузер может интерполировать. Например, перейти от circle(30%) до circle(50%) у вас получится без проблем, но переход между farthest-side и closest-side загонит браузер в тупик:

.element < shape-outside: circle(30%); transition: shape-outside 1s; float: left; >.element:hover

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

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

.element < /* four vertices (looks like rectangle) */ shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; >.element:hover< /* four vertices, but second and third overlap (looks like triangle) */ shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); >

Создание обтекания внутри фигуры

Создание обтекания внутри фигуры

Черновые спецификации CSS -фигур включали свойство shape-inside , которое позволяло использовать плавающий контент внутри фигуры. Некоторое время это свойство было реализовано в WebKit -браузерах и в Google Chrome .

Но заворачивание контента с произвольным внутренним позиционированием в произвольный наружный контур оказалось слишком сложно в реализации и вело к программным ошибкам. Поэтому свойство shape-inside было перенесено во второй уровень стандарта, а реализующий его код удалён из браузеров.

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

Компромисс – в нарушении семантики: нам придётся использовать два элемента без какого-либо определённого значения:

Положение подпорок ( .left-shape и .right-shape ) в самом начале контейнера имеет значение, так как они должны обогнуть содержимое по краям:

.left-shape < shape-outside: polygon(0 0, . ); float: left; width: 50%; height: 100%; >.right-shape

Создание обтекания внутри фигуры - 2

Такое решение позволяет подпоркам занять всё пространство контейнера, но свойство shape-outside выгрызет в них место для остального контента.

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

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

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

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

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

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

Отказоустойчивость и последовательное улучшение

Начните работу над вёрсткой с предположения, что браузер не поддерживает модные CSS -расширения вроде фигур. Затем добавьте их обнаружение и обработку. Существует отличная библиотека для тестирования браузеров – Modernizr . Тест на поддержку фигур находится в дополнительной секции .

Некоторые браузеры, в том числе и Google Chrome , имеют встроенный механизм обнаружения функций – CSS -правило @supports . Вот как можно отказоустойчиво использовать это правило:

.element < /* стили для всех браузеров */ >@supports (shape-outside: circle(50%)) < /* стили только для браузеров, поддерживающих CSS-фигуры */ .element< shape-outside: circle(50%); >>

Леа Веру написала подробную статью об использовании правила @supports .

Неоднозначности в именовании CSS-расширений

То, что мы сегодня знаем как CSS -фигуры, когда-то называлось « CSS-исключения и фигуры ». Разница может показаться незначительной, но на самом деле она очень важна.

CSS-исключения теперь представлены отдельной спецификацией и определяют обтекание блоков с абсолютным позиционированием без необходимости использовать свойство float . Как вы можете видеть, случаи использования фигур и исключений совершенно разные.

Итак, фигуры и исключения – не одно и то же, но они отлично дополняют друг друга. Проблема в том, что фигуры уже реализованы в современных браузерах, в то время как исключения находятся в разработке, и их взаимодействие с фигурами ещё не определено стандартом.

Инструменты для работы с CSS-фигурами

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

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

Brackets . Имеется расширение для этого замечательного текстового редактора, которое называется « CSS Shapes Editor ». Оно использует имеющийся в Brackets режим предварительного просмотра для интерактивного редактирования вершин.

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

Инспектор Google Chrome умеет выделять фигуры на странице. Наведите курсор на элемент, имеющий свойство shape-outside , и соответствующая фигура будет подсвечена.

Polyfill . Поддержка фигур была впервые реализована в браузере Google Chrome . В ближайшее время ожидается релиз Apple Safari 8 и iOS 8 с браузером, поддерживающим фигуры.

Другие браузеры также планируют включить этот функционал в свои продукты. А пока существует shapes-polyfill – реализация фигур для всех JavaScript-совместимых браузеров.

Заключение

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

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

Как обрезать геометрическую фигуру в css

Для чего используется свойство clip-path. Вырезание области элемента средствами CSS.

Главная СтатьиОбрезка блоков с помощью CSS свойства clip-path
Поделиться в соцсетях:

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

В качестве наглядного примера работы свойства рассмотрим два блока: первый обычный с картинкой на фоне, а второй — такой же, но с примененным свойством clip-path , которое выполняет его обрезку в форме звезды.

Как работает свойство clip-path

Свойство имеет следующий синтаксис:

.polygon < clip-path: ; >

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

Давайте обрежем наш блок кругом. Для этого, например, укажем следующее свойство CSS:

.circle

Свойство считает это значение так — блок с классом .circle должен быть обрезан кругом с радиусом 80px , центр которого расположен на расстоянии 110px по оси X (т.е. с левого края) и 85px по оси Y (т.е. с верхнего края). Таким образом мы увидим следующую картину (серый фон добавлен для иллюстрации обрезанного места):

Обрезка простыми фигурами

Кроме рассмотренного выше примера круга, свойство clip-path позволяет обрезать блоки такими фигурами, как эллипс, прямоугольник и многоугольник. Значения, указанные в параметрах функций могут иметь любые единицы измерения.

circle

Синтаксис круга может быть как простым ( circle(50%) — просто указывает его радиус, центр круга будет в центре блока), так и составным ( circle(50% at 20% 20%) — указывается радиус и координата центра).

ellipse

Синтаксис эллипса схож с кругом, кроме одного — первый параметр должен состоять из двух величин: радиус по оси X и радиус по оси Y. Координаты центра указываются по желанию.

inset

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

Например, значение inset(50px) обрежет блок прямоугольником, стороны которого сформированы отступами по 50px от каждой из граней; inset(20px 30px 40px 50px) обрежет блок прямоугольником, стороны которого сформированы отступами 20px 30px 40px и 50px сверху, справа, снизу и слева соответственно. Радиус указывается следующим параметром после ключевого слова round по правилам свойства border-radius .

polygon

Параметрами этой функции являются координаты, из которых формируется многоугольник. Точки фигуры, выраженные координатами по осям X и Y, записываются через запятую и могут быть как описаны вручную, так и взяты из готовых наборов различных ресурсов (напр. bennettfeely).

Обрезка сложной фигурой

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

Пример кода SVG:

В CSS достаточно будет обратиться к id необходимого clipPath :

.svg-shape

Если пофантазировать на тему разнообразия фигур для обрезки блоков, можно сгенерировать подобные примеры:

Геометрические фигуры на CSS

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

Квадрат

#square

Прямоугольник

#rectangle

Круг

#circle

Овал

#oval < width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; >

Треугольник вверх

#triangle-up

Треугольник вниз

#triangle-down

Треугольник налево

#triangle-left

Треугольник направо

#triangle-right

Треугольник в левом верхнем углу

#triangle-topleft

Треугольник в правом верхнем углу

#triangle-topright

Треугольник в левом нижнем углу

#triangle-bottomleft

Треугольник в правом нижнем углу

#triangle-bottomright

Параллелограмм

#parallelogram

Трапеция

#trapezoid

Звезда (6-конечная)

#star-six < width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; >#star-six:after

Звезда (5-конечная)

 #star-five < margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); >#star-five:before < border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); >#star-five:after

Пятиугольник

#pentagon < position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent; >#pentagon:before

Шестиугольник

#hexagon < width: 100px; height: 55px; background: red; position: relative; >#hexagon:before < content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; >#hexagon:after

Восьмиугольник

#octagon < width: 100px; height: 100px; background: red; position: relative; >#octagon:before < content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; >#octagon:after

Сердечко

#heart < position: relative; width: 100px; height: 90px; >#heart:before, #heart:after < position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; >#heart:after

Знак бесконечности

#infinity < position: relative; width: 212px; height: 100px; >#infinity:before, #infinity:after < content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#infinity:after

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *