Как сделать треугольник через css - Сайт о строительстве

Содержание

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

Глокая куздра штеко будланула бокра и кудрячит бокрёнка.

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

За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в табл. 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. Наложение треугольников

Глокая куздра штеко будланула бокра и кудрячит бокрёнка.

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

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

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

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

Глокая куздра штеко будланула бокра и кудрячит бокрёнка.

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

Рис. 6. Треугольник с тенью

6 методов создания треугольников

Главная»
Уроки»
CSS»
6 методов создания треугольников

Метки урока:
css
изображения
кодинг

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

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

Закодированное изображение

Подготовленное изображение треугольника лучше всего конвертировать в строку, чтобы сократить количество запросов HTTP.

Полезные инструменты:

Плюсы

Можно сделать любой дизайн с помощью теней, градиентов и рамок. А потом просто закодировать изображение.

Минусы

Нужно уметь пользоваться инструментом на подобие Photoshop/Gimp для редактирования изображения.
Для больших изображений размер строки может быть огромным.
Старые браузеры (такие как IE6/IE7) не поддерживают данный тип кодировки.

Рамка CSS

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

Плюсы

Легко изменять цвет и размер с помощью значений свойств CSS.
Данный метод кросс-браузерный.

Минусы

Данная техника использует рамки, поэтому нельзя использовать тени, градиенты и другие прелести СSS3.
Нужно помнить, что IE6 не поддерживает прозрачные рамки.
При использовании Firefox, значение CSS “transparent” может оказаться непрозрачным, особенно на диагональных рамках.

Объект HTML

Данное решение использует символы в кодах Unicode.

Плюсы

Кросс-браузерное решение
Можно добавлять тени с помощью свойства CSS3 text-shadow.

Минус

Кроме text-shadow, никаких других свойств CSS3 использвоать нельзя.
Нельзя получить точное пиксельное положение во всех браузерах.

Полезный инструмент:

http://copypastecharacter.com/.

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

Повернутый квадрат CSS

Для работы данного метода требуется два блока. Но можно использовать элемент с псевдо-элементами.

Создаем квадрат, например, 100×100 px – содержание поворачиваемого блока.
Поворачиваем блок на 45 градусов для формирования образа алмаза.
Сдвигаем алмаз вверх и устанавливаем свойство overflow: hidden для внешнего блока, чтобы выводить только половину.
Готово!

Плюсы

Можно использовать свойства CSS3 для создания нужного образа.

Минусы

Данное решение не является кросс-браузерным из-за использования трансформаций CSS3.

Элемент canvas HTML5

В разметке HTML помещаем элемент canvas:

Triangle

И с помощью JavaScript рисуем треугольник:

var canvas = document.getElementById(‘triangle’); var context = canvas.getContext(‘2d’); context.beginPath(); context.moveTo(0, 0); context.lineTo(100, 0); context.lineTo(50, 100); context.closePath(); context.fillStyle = «rgb(78, 193, 243)»; context.fill();

SVG (Scalable Vector Graphics)

Вот как можно определить встроенный в разметку треугольник SVG:

И добавляем для него стили:

.svg-triangle{ margin: 0 auto; width: 100px; height: 100px; } .svg-triangle polygon { fill:#98d02e; stroke:#65b81d; stroke-width:2; }

Небольшой эффект с интерактивной анимацией букв.
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Экспериментальный скрипт раскрывающейся навигации.

Видеокурс «HTML с нуля»

Если вы давно хотите как следует изучить HTML, то у меня для Вас есть отличная новость!

Вы можете совершенно бесплатно получить полноценный курс по HTML из моего платного сборника. 33 видеоурока от Евгения Попова!

Бесплатно!

Список уроков и подробности получения курса здесь

Видеокурс «CSS с нуля»

Если вы уже изучили HTML и хотите двигаться дальше, то следующим шагом будет изучение технологии CSS.

Так же, как и в случае с HTML, вы можете совершенно бесплатно получить полноценный курс по СSS из моего платного сборника. Вас ждет 45 подробных видеоуроков от Евгения Попова!

Бесплатно!

Список уроков и подробности получения курса здесь

При регистрации введите промокод 1popov и получите 28 дней бесплатного использования.

Как нарисовать треугольник на CSS

Вы здесь: Главная — CSS — CSS Основы — Как нарисовать треугольник на CSS

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

1-й способ

Создание простого изображения со стрелкой (например, вырезка из дизайна). Этот способ я сам постоянно использую, и знаю, что он является самым-самым популярным, и в некоторых случаях единственным.

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

В итоге, может быть 100 одинаковых стрелок, у которых разный фон, в итоге, будет 100 изображений.

2-й способ

Этот способ уже использует чистый CSS, он очень простой, но красивые уголки (например, с тенями, градиентами, с какими-нибудь сложными рисунками) на нём не сделаешь:

.triangle { border-color: #000 #fff #fff #fff; border-style: solid; border-width: 10px 5px 0 5px; height: 0; width: 0;

}

Далее к обычному блоку div можно применить класс triangle, в результате данный блок станет стрелкой чёрного цвета (#000). Размеры можно регулировать через свойство border-width. Вот об этом способе многие из Вас даже не слышали, поэтому если стрелка простенькая, то это наилучший способ.

Другие способы

Время от времени я с ними сталкиваюсь, но сам не использую их, поскольку ни один из них не является кроссбраузерным. Все они используют CSS3 и/или HTML5, которые, увы, ещё очень плохо поддерживаются даже современными браузерами, а про старые и говорить не приходится. Поэтому рекомендую Вам использовать на данный момент пока только первые 2 способа.

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:Она выглядит вот так:
Текстовая ссылка:Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Как сделать в CSS треугольник: самые удобные способы

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

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

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

Использование треугольника CSS в оформлении сайтов

Важно

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

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

На самом деле существует несколько методов создания треугольника CSS.

Способ создания треугольника CSS при помощи рамки

Первый метод, который позволяет создавать треугольник CSS, это border. Заключается данный метод в использовании рамки. Несмотря на то, что границы, создаваемые при помощи свойства border, не имеют к треугольнику никакого отношения, именно они чаще всего используются для этой цели.

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

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

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

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

Использование псевдоэлементов

При помощи таких приемов можно создавать у всплывающих подсказок и указаний уголки. Чтобы прикрепить треугольник к блоку посредством CSS, программисты чаще всего используют такие псевдоэлементы как beforeи after.

Совет

Если использовать их вместо, то можно нарисовать в CSS треугольник, который имеет обводку. Путем их комбинации можно создать множество красивых стрелок, применяя к родительскому элементу свойство position:relative. Это делается для того,чтобы псевдоэлементы со своих мест не съехали.

Преимуществами использования рамки CSS для создания треугольников стали следующие факторы:

— быстрое и легкое редактирование цвета и размера при помощи свойств;

— поддержка всеми интернет-браузерами

К недостаткам использования рамки для создания треугольников можно отнести:

— отсутствие возможности применить градиенты и тени;

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

Использование готовых картинок

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

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

В этих браузерах данный метод просто не будет работать.

Метод перевернутого квадрата

Еще одним способов является создание перевернутого квадрата средствами CSS. В данном случае вам потребуется два блока. Некоторые предпочитают использовать псевдоэлементы. Для начала необходимо создать квадрат. Он будет являться содержимым поворачиваемого элемента.

Затем квадрат необходимо развернуть на 45 градусов, чтобы он стал похож на алмаз. После этого выполняется сдвиг вверх. Внешний блок срывается с помощью свойства overflow: hidden. Такое решение не является кроссбраузерным.

В некоторых случаях картинка отображается не так, как изначально было задумано.

Заключение

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

Адаптивный треугольник с помощью CSS – JediCSS

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

Задача: сверстать адаптивный треугольник на чистом CSS

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

Плашка с адаптивным треугольником, которую нужно сверстать

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

Лучше использовать фоновый градиент. Мы будем созадавать треугольник через псевдоэлемент ::after.

Код изначальной заготовки:

.title { font-family: sans-serif; font-weight: normal; padding: 5% 2rem 0; background-color: #29cb75; text-align: center; color: #fff; border-radius: 2px; position: relative; } .title::after { content: ”; width: 100%; position: absolute; top: 100%; left: 0; }

Отрисовка треугольника

Всё, что описано ниже, применяем к .title::after.

Сразу сделаем одну половинку треугольника, с заливкой в правый верхний угол. Наполовину прозрачной, наполовину зелёной.

Нам нужно, чтобы фон заполнялся на половину и начинал отрисовываться слева. Так и указываем: начинай отображаться слева, займи 50% по ширине и не повторяйся.

background: linear-gradient(to right top, transparent 50%, #29cb75 50%) left / 50% 100% no-repeat;

То же самое проделаем со второй половинкой.

background: linear-gradient(to right top, transparent 50%, #29cb75 50%) left / 50% 100% no-repeat, linear-gradient(to left top, transparent 50%, #29cb75 50%) right / 50% 100% no-repeat;

Вроде бы всё хорошо, но нет. При масштабировании на стыке появляется белый глюк.

Исправим его небольшим костылём. добавив чуть больше процентовки, чтобы треугольники наслаивались друг на друга.

background: linear-gradient(to right top, transparent 50%, #29cb75 50%) left / 50.025% 100% no-repeat, linear-gradient(to left top, transparent 50%, #29cb75 50%) right / 50.025% 100% no-repeat;

Пишите в комментариях, если знаете способ без костыля.

Обратите внимание

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

background: linear-gradient(to right top, transparent 49.5%, #29cb75 50%) left / 50.025% 100% no-repeat, linear-gradient(to left top, transparent 49.5%, #29cb75 50%) right / 50.025% 100% no-repeat;

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

padding-top: 5%;

В макете у плашки скруглённые углы, сделаем их и в CSS. Добавим border-radius.

И теперь наш треугольник создаёт маленькие артефакты. Чтобы от них избавиться, уменьшим размер треугольника на величину скругления углов — те самые 2 пикселя, слева и справа. И не забудем отключить ширину 100%.

Подгоняем нужное значение отступов внутри плашки и готово.

See the Pen
Адаптивный треугольник CSS by JediCSS (@naykris)
on CodePen.

Если у вас есть идеи, как решить эту задачу проще, напомню — только при помощи CSS, поделитесь решением.

И пишите, если у вас тоже есть интересные задачки.

Треугольники, стрелки, квадраты и лимон при помощи свойств CSS border и border-radius

В моей статье про создание кнопки «наверх» меня часто просят, чтобы я дал ссылку на картинку со стрелкой.

А я либо предлагаю использовать HTML-сущность ▲ (в итоге получается такая вот стрелка ▲), либо предлагаю побольше почитать о свойстве CSS border.

В итоге я сам решил написать статью с трюками, которые можно провернуть при помощи свойств border и border-radius.

Все примеры в статье (кроме этой картинки) написаны на CSS, так что вы легко сможете посмотреть их исходный код.

Свойство border

Для начала давайте разберемся, на что вообще способен border, кроме как очерчивать границу в несколько пикселей вокруг элемента.

1. Треугольник (стрелка)

Возможно вы заметили, что этот пост помечен тегов «Ускорение сайта», вопрос — почему? Ответ кроется в том, что обычно, для создания стрелок на сайте, вебмастера используют картинки, более опытные используют спрайты или иконочные шрифты.

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

Рассмотрим теперь пример.

HTML:

наверх

CSS:
Только для стрелки, со ссылкой думаю вы и сами справитесь.

span.arr{ vertical-align: middle; margin: 0 5px; display: inline-block; width: 0; height: 0; border-top: 4px solid #96887E; border-left: 4px solid transparent; border-right: 4px solid transparent;
}

Довольно неплохо, верно? Кроме того, эту стрелку вы можете сделать как пошире, так и поуже.

А теперь посмотрим на другие примеры.

2. Квадрат

HTML:
Необязательно использовать именно , можете взять вместо него , если хотите.

CSS:
Как видите, стилей совсем немного, всё легко и просто.

span.square { width: 0; height: 0; display:inline-block; border: 40px solid; border-color: yellow green blue red; /* квадрат будет состоять из четырех разноцветных треугольников */
}

Весь HTML будет точно такой же, как и в предыдущем примере, мы лишь изменим класс элемента на lemon.

span.lemon { width: 200px; height: 200px; display:inline-block; background: #F5F240; border: 5px solid #F0D900; -moz-border-radius: 10px 150px 30px 150px; -webkit-border-radius: 10px 150px 30px 150px; border-radius: 10px 150px 30px 150px;
}

В итоге получаем вот такой красивый лимон:

Для каждого из четырех последующих примеров будет использоваться следующий общий HTML и CSS:

Привет, чувак!

span.talk{ display:inline-block; position: relative; background: #A0A0A0; width: 150px; height: 50px; line-height: 50px; color:#fff; text-align: center; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;
}

span.talk:after{ content: ”; position: absolute; width: 0; height: 0; border: 10px solid;
}

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

В 1-м варианте стрелка находится внизу:

span.talk:after { border-color: #A0A0A0 transparent transparent transparent; top: 100%; left: 50%; margin-left: -10px;
}

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

span.talk:after { border-color: transparent transparent #A0A0A0 transparent; bottom: 100%; left: 50%; margin-left: -10px;
}

Привет, чувак!

Если же вам понадобится использовать несколько разновидностей блока, например все четыре варианта, то помимо класса talk пропишите к каждому элементу ещё по одному классу, например top, right, bottom, left.

В этом же примере стрелка находится справа:

span.talk:after { border-color: transparent transparent transparent #A0A0A0; top: 50%; left: 100%; margin-top: -10px;
}

Привет, чувак!

И последний, 4-й вариант со стрелкой слева:

span.talk:after { border-color: transparent #A0A0A0 transparent transparent; top: 50%; right: 100%; margin-top: -10px;
}

Привет, чувак!

HTML:
Как видите, во всех примерах (кроме блоков с речью) HTML практически не отличается, меняются только классы, хотя и их можно оставить одинаковыми, если вы не намерены использовать сразу всё это на одной странице.

CSS:
Стили практически такие же, которые мы использовали при создании квадрата, но здесь ещё также присутствует свойство border-radius.

.biohazard { display:inline-block; width: 0; height: 0; border: 55px solid; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border-color: black yellow black yellow;
}

Создание различных геометрических фигур при помощи CSS

CSS

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

#comment_bubble {
width: 140px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
#comment_bubble:before {
content: «»;
width: 0;
height: 0;
right: 100%;
top: 38px;
position: absolute;
border-top: 13px solid transparent;
border-right: 26px solid #088cb7;
border-bottom: 13px solid transparent;
}

Pacman

HTML

Чтобы создать форму в виде Пакмана из известной игры, создадим также один DIV.

CSS

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

#pacman {
width: 0;
height: 0;
border-right: 70px solid transparent;
border-top: 70px solid #ffde00;
border-left: 70px solid #ffde00;
border-bottom: 70px solid #ffde00;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
border-bottom-left-radius: 70px;
border-bottom-right-radius: 70px;
}

Демонстрация примеров

Также для создания форм вы можете использовать следующие онлайн-генераторы:

Coveloping’s CSS Shapes Generator
Html-Generator’s CSS Shapes Generator

Надеюсь, вам понравился этот урок и он будет вам полезен.

Перевод с http://www.1stwebdesigner.com/

ВКонтакте

You have no rights to post comments

Создайте простой эффект загнутого уголка на CSS

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

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

Концепт

Посмотреть демо

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

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

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

Узнать подробнее

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

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

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

HTML

Для начала, создайте div такой как тот, что показан ниже. Я добавил заголовок с параграфом, один класс для общей стилизации страницы, который мы возможно захотим использовать где-то еще (tl – означает «top left» – верхний левый, мы создадим еще один класс для верхнего правового уголка позднее).

Lorem ipsum dolor sit amet…

Это все, что нам нужно сейчас. Давайте перейдем к CSS и применим стили!

CSS страницы

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

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

/* Опциональный градиент */ background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ffffff’, endColorstr=’#e5e5e5′,GradientType=0 ); /* IE6-9 */

Рисуем треугольные фигуры средствами CSS

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

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

Преимущества метода

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

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

Важно

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

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

Суть метода

Мы рассмотрим, простой способ создания треугольных блоков, который основывается на свойстве border. При правильном обращении, указанное свойство разделит блок на равные треугольники с одинаковыми углами. Рассмотрим пример кода

CSS

.trigon { border-color: #47afca #5977b5 #ac3a39 #ff8931;
border-style: solid; border-width: 200px 200px 200px 200px; height: 0px; width: 0px; display:block; margin:0px auto;/*центруем*/
}

В итоге на экране видим следующую картинку

Особенности метода

При использовании такого метода стоит отметить ряд факторов, которые будут влиять на дальнейшую работу веб-мастера над дизайном ресурса:

метод позволяет рисовать только фигуры с острыми углами
при явном не соблюдении равенства граней фигуры может возникнуть эффект искажения линий, которые и являются этими же гранями. Такой эффект ощутим в браузерах Opera и Internet Explower.
комбинации треугольных фигур могут образовывать сложные многоугольники
свойство box-shadow конфликтует с треугольными элементами, созданными по данной методике.

В каких браузерах работает?

6.0+
4.0+
10.0+
3.0+
3.0+
—
—

Вопрос: Как сделать трехугольный треугольник в CSS

Я хотел бы добиться такой же формы, как и без Javascript:

В настоящее время я накладываю изображение «рамки» на оранжевый прямоугольный div, но это довольно хаки. Я полагаю, я мог бы использовать динамически созданный элемент canvas, но для этого требуется не только JS, но и поддержка холста HTML5. Есть идеи?

2018-01-21 20:29

источник

Ответы:

Моя лучшая попытка: http://dabblet.com/gist/4592062

Pixel-совершенство любого размера использует более простую математику, чем оригинальное решение Ana, и, на мой взгляд, более интуитивно понятно ?

.triangle { position: relative; background-color: orange; text-align: left;
}
.triangle:before,
.triangle:after { content: ”; position: absolute; background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after { width: 10em; height: 10em; border-top-right-radius: 30%;
} .triangle { transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.triangle:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle:after { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

2018-01-22 05:07

.triangle, .triangle:before, .triangle:after { width: 4em; height: 4em; }
.triangle { overflow: hidden; position: relative; margin: 7em auto 0; border-radius: 20%; transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866); cursor: pointer; pointer-events: none;
} .triangle:before, .triangle:after { position: absolute; background: orange; pointer-events: auto; content: ”;
}
.triangle:before { border-radius: 20% 20% 20% 53%; transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle:after { border-radius: 20% 20% 53% 20%; transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(.866) translateX(24%);
} /** extra styles to show how it works **/ .triangle:hover { overflow: visible; }
.triangle:hover:before, .triangle:hover:after { background: none; }
.triangle:hover, .triangle:hover:before, .triangle:hover:after { border: dashed 1px;
}

Идея очень проста: сначала вы применяете серию преобразований к своей .triangle элемент (который имеет overflow: hidden; — вы можете удалить это, чтобы посмотреть, что произойдет;)), чтобы получить ромб.

Затем вы применяете те же преобразования к :before а также :after псевдоэлементы, плюс еще несколько, чтобы сделать их ромбоидальными.

И, в конце концов, у вас есть три ромба, которые пересекаются, а оранжевая форма — их пересечение. Наведите треугольник, чтобы увидеть пересекающиеся фигуры;)

Он отлично масштабируется, вам просто нужно изменить width и height из .triangle элемент.

Для Firefox, Chrome и Safari только оранжевый треугольник с закругленными углами чувствителен к зависанию (благодаря pointer-events: none; на .triangle элемент и pointer-events: auto; на псевдоэлементах). В противном случае это может быть достигнуто путем упаковки .triangle в элементе, имеющем тот же width а также height (и того же border-radius) а также overflow: hidden;,

Заметки

Вы также можете сделать это с помощью CSS-градиентов. Однако, в отличие от 2D прообразы , Градиенты CSS не будет работать в IE9 ,
Хотелось бы, мне не пришлось бы раскручивать псевдоэлементы, которые наследуют косы от своего родителя, только чтобы перекосить их снова после вращения, но, похоже, это не работает.

2018-01-21 22:00

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

Если вы абсолютно должен иметь его в файле CSS, вы можете попробовать данные: URL (не поддерживается в IE7 и ниже).

2018-01-21 20:32

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

И код (отрегулируйте общий размер с помощью одного font-size имущество):

.triangle { font-size: .8em; position: relative; width: 3.8em; height: 3.8em; text-align: center; margin: 10% auto 0; overflow: hidden; border-radius: 100%;
} .triangle:before { content: ”; position: absolute; width:0; height: 0; border: solid 2em transparent; border-bottom-color: orange; border-bottom-width: 3.2em; border-top-width: 0; margin: -.3em -2em;
}

Играйте здесь: http://dabblet.com/gist/4590714

2018-01-22 03:48

Совет

Играли с Мюррей Смитс в наиболее распространенной версии. Написал его как Stylus mixin и исправил некоторые проблемы с запасом и добавил опцию направления. Mixin также масштабирует треугольник до некоторого размера пикселя. Не очень хорошо протестирован. Использовать с осторожностью

triangle(direction = up, color = #333, size = 32px) position: relative background-color: color width: 2*(round(size/3.25)) height: 2*(round(size/3.25)) border-top-right-radius: 30% &:before, &:after content: ” position: absolute background-color: inherit width: 2*(round(size/3.25)) height: 2*(round(size/3.25)) border-top-right-radius: 30% if direction is up transform: rotate(-60deg) skewX(-30deg) scale(1,.866) margin: (@width/4) (@width/2.5) (@width/1.2) (@width/2.5) if direction is down transform: rotate(-120deg) skewX(-30deg) scale(1,.866) margin: 0 (@width/1.5) (@width/1.5) (@width/6) if direction is left transform: rotate(-30deg) skewX(-30deg) scale(1,.866) margin: (@width/5) 0 (@width) (@width/1.4) if direction is right transform: rotate(-90deg) skewX(-30deg) scale(1,.866) margin: (@width/5) (@width/1.4) (@width) 0 &:before transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%) &:after transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%)

а затем просто добавьте mixin в свой класс

.triangle &.up triangle() &.down triangle(down) &.left triangle(left) &.right triangle(right)

2018-03-09 14:16