Мне нужно создать галерею изображений, в которой отдельные изображения представляют собой неправильные треугольники (акцент на неправильные).
Я нашел ограниченные примеры того, как получить изображения треугольников с помощью HTML и CSS, не модифицируя изображениясамих себя.Один пример, который я нашел в этом CodePen https://codepen.io/thebabydino/pen/liDCz, был шагом в правильном направлении, но, глядя на него, я не могу найти способ сделать изображения неправильными треугольниками.
Результатом я являюсья пытаюсь добиться этого:
<div class='pageOption'>
<a href='#' class='option'>
<img src='~/images/team/pic_paggas/A.png'>
</a>
<a href='#' class='option'>
<img src='~/images/team/pic_paggas/D.png'>
</a>
</div>
Это основной HTML, который я буду использовать, а CSS:
.pageOption {
overflow: hidden;
position: relative;
margin: 0 auto;
width: 40em;
height: 27em;
}
.option, .option img {
width: 100%;
height: 100%;
}
.option {
overflow: hidden;
position: absolute;
transform: skewX(-55.98deg);
}
.option:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.option:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.option img {
opacity: .75;
transition: .5s;
}
.option img:hover {
opacity: 1;
}
.option img, .option:after {
transform: skewX(55.98deg);
transform-origin: inherit;
}
Помните, что HTML и CSS, которые у меня есть, могутне быть оптимальным для моей проблемы.Я думаю, что форма изображений, которые я использую (прямоугольная), как-то связана с этим.
Было бы лучше, если бы решение лучше поддерживалось во всех браузерах.