Як я згадував шкільний курс геометрії

image
Як часто вам доводилося вирішувати диференціальне рівняння або знаходити інтеграл після закінчення навчання? Думаю, нечасто, якщо, звичайно, ви не вчений. Але є дисципліни, теоретичні знання з якими можуть раптово стати в нагоді нам у роботі, навіть якщо ця робота безпосередньо не пов'язана з наукою. Одна з таких дисциплін — геометрія.
У цій статті я хочу розповісти про завдання, вирішити яку мені допомогли геометричні формули. І оскільки я займаюся розробкою інтерфейсів, то мова піде про верстку ось такого спливаючого повідомлення.
image
На перший погляд, нічого складного. Швидко накидаємо основні стилі, додаємо скруглення і тінь, а покажчик у вигляді треугульника робимо з допомогою псевдоэлемента і широко відомої техніки. Перевіряємо результат:
http://codepen.io/belyan/pen/vymwXe
Все добре, от тільки трикутник теж повинен бути з тінню. Але якщо ми додамо тінь до нашого псевдоэлементу, то нічого не вийде: тінь буде квадратною.
image
Виходить, що цей спосіб підходить тільки для створення простих трикутників, без тіні й обведення.
Спробуємо застосувати іншу, менш відому техніку створення трикутників CSS. Знову скористаємося бордерами, тільки зробимо трикутник в лівому верхньому кутку, додамо елементу тінь і зрушимо її в той же кут з допомогою негативних значень. Тепер повернемо елемент на 45 градусів за годинниковою стрілкою — і отримаємо трикутник з тінню.
image
http://codepen.io/belyan/pen/ObmYQa
Результат виглядає вже краще, але не ідеально. Якщо придивитися, то видно, що на макеті трикутник трохи нижче, ніж у нас. І ми не зможемо це виправити, оскільки наш трикутник завжди буде залишатися прямокутним. Ми можемо додати йому скруглення, та навіть емулювати обведення за допомогою внутрішньої тіні, але ми не можемо змінити значення верхнього кута.
Для створення непрямокутного трикутника скористаємося більш складним способом. Суть його в тому, що ми створюємо квадрат, повертаємо на 45 градусів і нахиляємо на потрібний кут, щоб отримати ромб, і потім приховуємо його нижню частину. В результаті отримуємо рівнобедрений трикутник будь-яких розмірів, яким ми можемо додати тінь, кордон та округлення.
image
Складність полягає в тому, що доводиться вручну підбирати розміри квадрата і кут нахилу, поки не доб'ємося потрібного виду. Тому багато цей спосіб не використовують. Так давайте напишемо міксин, який буде робити всі обчислення за нас!
Пишемо міксин
Далі я буду використовувати препроцесор LESS, але даний міксин можна легко переписати і на SCSS.
Візьмемо в якості ілюстрації ось такий трикутник і поставимо в якості початкових параметрів його розміри — підстава
b
та висоту
h
.
image
Почнемо обчислення знаходження сторони
a
. Оскільки висота рівнобедреного трикутника ділить його основу навпіл, то бічну сторону
a
можна знайти на теоремою Піфагора:
@base: 100px;
@height: 100px;
@side: sqrt(@base * @base / 4 + @height * @height); // про штани, сподіваюся, всі пам'ятають ;)

Знаючи значення усіх сторін, ми можемо знайти бічний кут
alpha
. Згадуємо, що синус кута є ставлення противолежащего катета до гіпотенузі. Протилежні катет у нас
h
, а гіпотенуза  
a
. Таким чином:
@alpha: asin(@height / @side); // результат буде в радіанах!

Тепер необхідно обчислити кут нахилу для трансформації нашого квадрата після повороту на 45 градусів. Для цього домалюємо прямокутний трикутник, основа якого збігається з нашим.
image
Тепер наочно видно, що кут нахилу
beta
буде дорівнює різниці між бічним кутом
alpha
і кутом повороту.
@beta: convert(@alpha, deg) - 45deg; // не забуваємо перевести радіани назад в градуси

Останнє значення, яке нам необхідно обчислити, — це бічна сторона квадрата до його трансформації. Для цього скористаємося косинусом кута. Кут нахилу нам відомий, а прилеглою катетом буде сторона
a
. Таким чином, бічну сторону можна обчислити за формулою:
@size: @side * cos(@beta);

Тепер ми знаємо вихідні розміри квадрата, а також кути повороту і нахилу, для трансформації його в ромб. Додаємо необхідні стилі і приховуємо нижню половинку ромба з допомогою
overflow: hidden
, в результаті отримуємо рівнобедрений трикутник заданих розмірів. Міксин готовий.
http://codepen.io/belyan/pen/wozWXE
Застосовуємо його до нашого з'являється повідомлення і нарешті отримуємо бажаний результат. :)
http://codepen.io/belyan/pen/LbyKEd
Хочу додати, що з допомогою цього ж міксина ми можемо створювати і рівносторонні трикутники, оскільки вони є приватним випадком рівнобедрених. У цьому випадку нам досить буде задати тільки підстава трикутника, а його висоту можна легко вирахувати за формулою:
@height: @base * sin(60deg);
.
Також можна додати у міксин можливість завдання напрямку вершини трикутника:
top
,
left
,
right
,
bottom
. Я не став цього робити у статті, оскільки обсяг коду значно збільшився б. Тим же, кому цікава ця тема, пропоную поглянути на розширену версію даного міксина. Там же ви знайдете міксини і для інших геометричних фігур, таких як коло, овал, хрест, зірка і ін
http://codepen.io/belyan/pen/Lpqdmx
Сподіваюся, вам було цікаво. Спасибі за увагу!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.