Как элегантно вставить любое ХТМЛ-содержимое в треугольный контейнер (продолжение)

Руст Кулматов

В прошлом совете я рассказал, как добиться нужного эффекта с помощью 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.

Имя и фамилия	обязательны полностью для публикации комментария
Электронная почта	адрес не будет опубликован
Ваши соображения
Иллюстрация	гиф или джипег шириной не более 700 пикселей

ПНГ-маска

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

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

Ваш комментарий

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