Css треугольники: Треугольники через CSS | htmlbook.ru

Всем привет! Раньше верстальщики практически все элементы дизайна вырезали в Фотошопе из PSD макета, в том числе и треугольники – маленькие и больше, – неважно. Просто не было возможности прописать их кодом. Сейчас HTML5 повелевает отрабатывать свои навыки в CSS3 и с его помощью создавать любую фигуру.

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

Итак, чтобы создать треугольник через CSS, понадобится свойство border, а также нулевая ширина и высота блока.

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

 <div></div>

Затем в CSS файл скопируйте код с выбранным классом.

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

.triangle-top {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid #f95959;
}

.triangle-bottom {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 200px solid #f95959;
}

.triangle-left {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-right: 200px solid #5cb85c;
    border-bottom: 100px solid transparent;
}

 . triangle-right {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-left: 200px solid #5cb85c;
    border-bottom: 100px solid transparent;
}

.triangle-top-left {
    width: 0;
    height: 0;
    border-top: 200px solid #f0ad4e;
    border-right: 200px solid transparent;
}

.triangle-top-right {
    width: 0;
    height: 0;
    border-top: 200px solid #f0ad4e;
    border-left: 200px solid transparent;
}

.triangle-bottom-left {
    width: 0;
    height: 0;
    border-bottom: 200px solid #5bc0de;
    border-right: 200px solid transparent;
}

. triangle-bottom-right {
    width: 0;
    height: 0;
    border-bottom: 200px solid #5bc0de;
    border-left: 200px solid transparent;
}

Сначала непонятно, причем тут border.. но немного практики и все становится на свои места.

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

Как много фигур можно создать с помощью CSS, для любителей кода это очень увлекательное занятие! А потом бы еще сделать анимацию… Буду развивать направление рисунков и анимации в CSS и JS.

Надеюсь, вам было интересно? 🙂 Пока!

Голосов: 3, Средняя оценка: 5

— HTML | MDN

HTML-элемент** <details>** используется для раскрытия скрытой (дополнительной) информации.

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

Элемент поддерживает только глобальные атрибуты.

open

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

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>
<details open>
  <summary>Even more details</summary>
  <p>Here are even more details about the details.</p>
</details>

Result

**Примечание:**Если приведённый выше пример не работает, см. Browser compatibility , чтобы определить поддерживает ли вообще ваш браузер эту функцию.

Следуя более новой спецификации, Firefox отображает элемент summary как display: list-item и маркер можно стилизовать так же, как и элементы списка.

Следуя более старой спецификации, в Chrome and Safari существует пользовательский псевдо-элемент ::-webkit-details-marker, с помощью которого можно стилизовать маркер.

Для кроссбраузерной стилизации маркера, чтобы скрыть дефолтный и добавить кастомный, необходимо для Firefox установить элементу summary {display: block;}, а для Chrome и Safari’s установить ::-webkit-details-marker {display: none;}. После этого дефолтный маркер будет скрыт, после чего можно установить свой маркер любым доступным способом стилизации. В примере ниже с помощью псевдоэлементов маркер возвращается обратно.

HTML

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

CSS

summary {
  display: block;
}
  summary::-webkit-details-marker {
  display: none;
}
summary::before {
  content: '\25B6';
  padding-right: 0.5em;
}
details[open] > summary::before {
  content: '\25BC';
}

Result

Specification	Status	Comment
HTML Living Standard Определение ‘<details>’ в этой спецификации.	Живой стандарт
HTML 5.1 Определение ‘<details>’ в этой спецификации.	Рекомендация	Initial definition

BCD tables only load in the browser

• <summary>

Last modified: 10 окт. 2022 г., by MDN contributors

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

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

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

CSS

/* создаем стрелку, указывающую вверх */
div.стрелка вверх {
ширина: 0;
высота: 0;
граница слева: 5px сплошная прозрачная; /* наклон стрелки влево */
граница справа: 5px сплошная прозрачная; /* наклон стрелки вправо */
нижняя граница: 5px сплошная #2f2f2f; /* внизу, добавьте сюда цвет фона */
размер шрифта: 0;
высота строки: 0;
}

/* создаем стрелку, указывающую вниз */
div.стрелка-вниз {
ширина: 0;
высота: 0;
граница слева: 5px сплошная прозрачная;
граница справа: 5px сплошная прозрачная;
верхняя граница: 5px сплошная #2f2f2f;
размер шрифта: 0;
высота строки: 0;
}

/* создаем стрелку, указывающую влево */
div.стрелка-влево {
ширина: 0;
высота: 0;
нижняя граница: 5px сплошная прозрачная; /* наклон стрелки влево */
граница сверху: 5px сплошная прозрачная; /* наклон стрелки вправо */
граница справа: 5px сплошная #2f2f2f; /* внизу, добавьте сюда цвет фона */
размер шрифта: 0;
высота строки: 0;
}

/* создаем стрелку, указывающую вправо */
div.  стрелка-вправо {
ширина: 0;
высота: 0;
нижняя граница: 5px сплошная прозрачная; /* наклон стрелки влево */
граница сверху: 5px сплошная прозрачная; /* наклон стрелки вправо */
граница слева: 5px сплошная #2f2f2f; /* внизу, добавьте сюда цвет фона */
размер шрифта: 0;
высота строки: 0;
}

 

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

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

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

div.tooltip {
/* стиль содержимого всплывающей подсказки здесь; ничего общего со стрелками */
}

/* совместно используется до и после */
div.tooltip:до, div.tooltip:после {
содержание: ' ';
высота: 0;
положение: абсолютное;
ширина: 0;
граница: 10px сплошная прозрачная; /* Размер стрелки */
}

/* эти стрелки будут указывать вверх */

/* вверху, меньшая стрелка */
div.tooltip: перед {
нижний цвет границы: #fff; /* цвет стрелки */

/* позиционирование */
положение: абсолютное;
верх: -19пкс;
слева: 255 пикселей;
z-индекс: 2;
}

/* стрелка, которая действует как фоновая тень */
div.tooltip: после {
нижний цвет границы: #333; /* цвет стрелки */

/* позиционирование */
положение: абсолютное;
верх: -24px;
слева: 255 пикселей;
z-индекс: 1;
}
 

Сторона границы, к которой вы добавляете цвет, является противоположной стороной указателя стрелки. Кроме того, вам не нужно использовать оба псевдоэлемента :before и :after — вам нужно использовать только один. Однако вторую стрелку можно использовать как фоновую тень или фоновую «границу».

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

• Дэвид Уолш 19 февраля 2019 г.

  Добро пожаловать в мой новый офис

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

• Дэвид Уолш 11 июня 2013 г.

  Обслуживание шрифтов из CDN

  Все мы знаем, что для максимальной производительности мы должны размещать свои ресурсы в CDN (другом домене). Наряду с этими активами есть пользовательские веб-шрифты. К сожалению, пользовательские веб-шрифты через CDN (или любой междоменный запрос шрифта) не работают в Firefox или Internet Explorer (правильно, по спецификации), хотя…

  9 Умопомрачительные демонстрации WebGL

  Несмотря на то, что разработчики теперь ненавидят Flash, мы все еще пытаемся наверстать упущенное, чтобы дублировать возможности анимации, которые предоставляла нам старая технология Adobe. Конечно, у нас есть холст, потрясающая технология, которую я выделил в 9 умопомрачительных демонстрациях. Доступна еще одна технология…

• Дэвид Уолш 2 июня 2009 г.

  Добавление снимков экрана для внешних ссылок с помощью всплывающих подсказок MooTools

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

Треугольники CSS · GitHub

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

Этот файл содержит двунаправленный текст Unicode, который может быть интерпретирован или скомпилирован не так, как показано ниже. Для просмотра откройте файл в редакторе, который показывает скрытые символы Unicode. Узнайте больше о двунаправленных символах Unicode

Показать скрытые символы

Этот файл содержит двунаправленный текст Unicode, который может быть интерпретирован или скомпилирован не так, как показано ниже. Для просмотра откройте файл в редакторе, который показывает скрытые символы Unicode. Узнайте больше о двунаправленных символах Unicode

Показать скрытые символы

	/*Идея представляет собой коробку с нулевой шириной и высотой.
	Фактическая ширина и высота стрелки определяются шириной границы.
	Например, в стрелке вверх нижняя граница окрашена, а левая и правая
	прозрачны, образуя треугольник.*/
	.стрелка вверх {
	ширина: 0;
	высота: 0;
	граница слева: 5px сплошная прозрачная;
	граница справа: 5 пикселей сплошная прозрачная;
	нижняя граница: сплошной черный цвет 5 пикселей;
	}
	. стрелка вниз {
	ширина: 0;
	высота: 0;
	граница слева: 20px сплошная прозрачная;
	граница справа: 20 пикселей сплошная прозрачная;
	граница сверху: 20px сплошная #f00;
	}
	.стрелка-вправо {
	ширина: 0;
	высота: 0;
	border-top: 60px сплошной прозрачный;
	нижняя граница: 60 ​​пикселей сплошная прозрачная;
	граница слева: 60 ​​пикселей сплошной зеленый;
	}
	. Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт