Diagonal section with images

Question

I've been trying to make a diagonal sections using CSS but if I use the border property brings me problems

Answer 1

There are several issues in the mockup you show. To make it clear, I will only adress the slanted images on the right:

In the following example, the image container is skewed and the images are "unskewed" :

#container{
  overflow:hidden;
}
.slanted{
  float:right;
  width:60%;
  transform-origin:0 100%;
  transform:skewX(-15deg);
  overflow:hidden;
}
.slanted img{
  width:100%;
  display:block;
  transform-origin:inherit;
  transform:skewX(15deg);
}

<div id="container">
  <div class="slanted">
    <img src="http://lorempixel.com/image_output/people-q-c-400-100-7.jpg" />
    <img src="http://lorempixel.com/image_output/people-q-c-400-100-7.jpg" />
    <img src="http://lorempixel.com/image_output/people-q-c-400-100-7.jpg" />
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor ultricies ipsum quis commodo. Pellentesque venenatis, diam non congue interdum, neque quam pellentesque elit, non ultricies dui elit non dolor. Cras enim quam, tincidunt sit amet nulla id, imperdiet luctus lectus. Sed ac mauris in mi sagittis varius. Nulla facilisi. Etiam urna erat, 
  </div>
</div>

Fore the slanted text on the left, you can take a look at this question : Align text on slanted shape