Как диагонально разделить элемент html

Question

Мне интересно, какой был бы лучший способ диагонального разбиения элемента, чтобы он выглядел как изображение ниже, используя любые средства html/css/js? Изображения не должны быть изменены, а просто замаскированы.

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

Answer 1

Вы можете достичь этого путем перекрытия 2 дивы и перекос одного из них, например, как я сделал в этой скрипкой: https://jsfiddle.net/s0h2g0zw/

#parallelogram { 
    width: 150px; 
    height: 100px; 
    -webkit-transform: skew(20deg); 
     -moz-transform: skew(20deg); 
     -o-transform: skew(20deg); 
    background: red; 
} 

#square { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position:absolute; 
    left:0px; 


} 

Вы можете посмотреть больше на других примерах: https://css-tricks.com/examples/ShapesOfCSS/

Надежда это поможет вам :)

Answer 2

Если вы используете перекос в тексте div с цветом фона и позиционированием изображения под div с z-index?

Answer 3

Маскировка изображения по диагонали был дан ответ здесь: Cutting image diagonally with CSS3

Здесь они использовали клип-путь вместо одного DIV маскирования другой.
Которая может быть наложена на div для текста.

Но тогда имейте в виду, как это будет выглядеть в отзывчивом дизайне.