Диагональ ДИВ с изображением

Question

Я пытаюсь добиться такого же результата this

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

<div class="diagonal"> 
    <div class="diagonal-black"></div> 
    <div class="diagonal-blue"></div> 
</div> 

Спасибо,

Брэма

Answer 1

Использование границ на псевдо-элемента :

.diagonal {width:700px; height:200px;} 
 
.diagonal-black {float:left; background:black; width:50%; height:200px;} 
 
.diagonal-blue {float:right; background:blue; width:50%; height:200px; position:relative;} 
 
.diagonal-blue:after {position:absolute; content:""; width:0; top:0; left:-50px; height:0; border-bottom:200px solid transparent; border-right:50px solid blue;}

<div class="diagonal"> 
 
    <div class="diagonal-black"><img src="https://placekitten.com/350/200" alt="" /></div> 
 
    <div class="diagonal-blue"></div> 
 
</div>

Answer 2

Я думаю, что наиболее распространенным способом является использование клип-путь. Другой способ - использовать границы. Есть учебники по обоим. Вот пример того, как сделать ваш пример работы

DEMO

.diagonal { 
    height: 500px; 
    width: 500px; 
    background: blue; 
} 
.diagonal-black { 
    background: black; 
    width: 100%; 
    height: 100%; 
-webkit-clip-path: polygon(74% 0, 100% 0, 100% 100%, 0% 100%); 
clip-path: polygon(74% 0, 100% 0, 100% 100%, 0% 100%); 
} 

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

Answer 3

Как насчет этого?

<div class='diagonal'></div> 

<style> 
.diagonal { 
    position: relative; 
    width: 100%; 
    height: 300px; 
    background-color: black; 
    overflow: hidden; 
} 

.diagonal::after { 
    content: ''; 
    position: absolute; 
    left: 50%; 
    width: 100%; 
    height: 200%; 
    background-color: blue; 
    -webkit-transform: skewX(45deg) translateX(-50%); 
    -moz-transform: skewX(45deg) translateX(-50%); 
    -ms-transform: skewX(45deg) translateX(-50%); 
    -o-transform: skewX(45deg) translateX(-50%); 
    transform: skewX(45deg) translateX(-50%); 
} 
</style> 

В принципе этот способ все, что вам нужно сделать, это настроить transform, width и/или height, чтобы получить его в нужном положении вы хотите.

jsbin example