x
 
↑
Май
•
1 •

•

•

5 •
↓
Евгений Арутюнов
25 мая 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Пропустите, пожалуйста, без очереди — мне только спросить!

Руст, как элегантно вставить любое ХТМЛ-содержимое в треугольный контейнер?

(Продолжение)

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

Но иногда можно схитрить.

ПНГ-маска

Можно положить фон поверх картинки и вырезать в нём окно в виде треугольника в нужном месте. Для того, чтобы содержимое треугольника нажималось, нужно добавить маске pointer-events: none:

<!-- index.html -->
<div class="wrapper">
  <div class="element">
    <button class="element-button">
      Нажми на меня скорее!
    </button>
  </div>
  <div class="overlay"></div>
</div>
/* style.css */
.wrapper {
  position: relative;
  box-sizing: border-box;
  width: 300px;
  height: 300px;
  padding: 50px;
}

.element {
  position: relative;
  height: 100%;
  background: url(400.png) center / cover;
}

.element-button {
  margin-top: 80%;
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(600-overlay.png) center / cover;
  pointer-events: none;
}
Обрезка с помощью ПНГ-маски

Абсолютное позиционирование

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

<!-- index.html -->
<div class="background">
  <div class="element">
    <button class="element-button">Нажми</button>
  </div>
</div>
/* style.css */
.background {
  position: relative;
  box-sizing: border-box;
  width: 300px;
  height: 300px;
  padding: 50px;
  background: url(600.png) center / cover;
}

.element {
  position: relative;
  height: 100%;
  background: url(400-triangle.png) center / cover;
}

.element-button {
  position: absolute;
  bottom: 20px;
  left: 25%;
  width: 50%;
  text-align: center;
}
Ручное позиционирование, треугольник в фоне. Самостоятельно следим за переполнением элемента.

Трансформ-хак

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

Как получить треугольник из квадрата

Это можно сделать в ЦСС с помощью комбинации transform: skew, transform: rotate и overflow: hidden. Содержимое полученного треугольника тоже деформируется, но его можно восстановить. Получается так:

<!-- index.html -->
<div class="background">
  <div class="element">
    <div class="element-triangle">
      <div class="element-triangleReset">
        <div class="element-content">
          <button class="element-button">
            Нажми на меня скорее!
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
/* style.css */
.wrapper {
  position: relative;
  box-sizing: border-box;
  width: 300px;
  height: 300px;
  padding: 50px;
  background: url(600.png) center / cover;
}

.element {
  position: relative;
  width: 100%;
  height: 100%;

  /* Обрезаем дочерний ромб */
  overflow: hidden;
}

.element-triangle {
  position: absolute;
  bottom: -50%;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* Деформируем прямоугольник в ромб
  и поворачиваем на бок. Также компенсируем
  потерю размера в результате деформации */
  transform: rotate(45deg)
    skew(18deg, 18deg)
    scale(1.05);
}

.element-triangleReset {
  width: 100%;
  height: 100%;
  position: relative;

  /* Восстанавливаем деформированное
  содержимое */
  transform: skew(-18deg, -18deg)
    rotate(-45deg)
    scale(1.05);
}

.element-content {
  background: url(400.png) center / cover;
  background-position: center center;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 50%;
}

.element-button {
  margin-top: 80%;
  width: 100%;
}
Треугольник с помощью трансформаций

Если знаете какой-то другой способ, пишите. Все описанные решения я собрал в коллекцию на Коудпене.
P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.
На чём разрабатывать, чтобы потом не было мучительно больно? «Ленивая» загрузка картинок минимальными средствами 1 • «Маленькое, большое, необычное» — проверка вёрстки на прочность тремя видами данных Как должен выглядеть хорошо подготовленный макет для разработчика?




Недавно всплыло

2 • Почему важно иметь стратегию и придерживаться её? 1 • 4 • 7 •