Как это сделано?

Question

[Сева]

Тултип "треугольничек", который часть изображения. Как?

UPD Я знаю, как сделать треугольник и как его позиционировать, как в треугольнике оказывается нужный кусочек фотографии?

Answer 1

[tef]

Если это не svg, а это скорее всего svg, то это css обрезка и маски. Читать тут.

Comments

[hjk]

tef а как сделать такое на svg?

[tef]

hjk: В статье по ссылке всё написано. Но самый простой способ - в лоб запилить блок нужной формы прямо на svg, в данном случае с треугольником сверху.

[hjk]

tef: спасибо!

Answer 2

[Niko Frost]

Просто сделали в CSS треугольник, применили к второму блоку, склеили. И потом через hover эффект вывели. Вот так вот. Чистый CSS.

Comments

[Сева]

Как в треугольнике оказывается нужная часть фотографии?

[Niko Frost]

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

[Сева]

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

[Niko Frost]

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

[Сева]

Хорошо, как тогда сделать треугольник прозрачным? Вы не могли бы напросать на jsfiddle?

[Niko Frost]

Там не нужна прозрачность. Вы хоть в черный цвет сделайте. На нее потом фотография сама натянется. Сделайте треугольник, подогните к нужному блоку. А затем оберните треугольник с блоком в один класс. После чего примените к этому классу свойство, например: background: url(photo.png);. Можете еще прописать размеры, что бы фотография была ровно.

[Сева]

Я могу сделать треугольник бордерами, хотя обычно я их делаю поворачиванием квадратного дива на 45 градусов и отрицательным margin-top. Я не понимаю, как сделать треугольный див.

[Niko Frost]

Вот: https://www.youtube.com/watch?v=_3v_5BZK_L0

Answer 3

[Владислав Копылов]

типо так:

<div class="field">
 <div class="triangle"></div>
 <div class="content"></div>
</div>

а дальше в ход вступает css с позиционированием

А вообще можно при помощи chrome developer tools посмотреть

Comments

[Сева]

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

[Владислав Копылов]

На данном примере там просто голубой фон. Если там реально часть фотографии, то background-position

[Сева]

Это часть фотографии, дополнил вопрос.

[Владислав Копылов]

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

[Сева]

Как сделать такой треугольник? Border'ом не получится, в голову приходит только сделать квадрат, повернуть его на 45 градусов и "спрятать" наполовину за блок, а фон как-то повернуть в обратную сторону на 45 градусов.

[Сева]

Вы не могли бы напросать на jsfiddle?