带图像的对角线部分

Question

我一直在尝试使用 CSS 制作对角线部分，但如果我使用边框属性会给我带来问题

Answer 1

您展示的模型中存在几个问题。为了说清楚，我只针对右边倾斜的图片：

在下面的例子中，图像容器是倾斜的，图像是 "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>

对于左边倾斜的文字，你可以看看这个问题：

带图像的对角线部分

Diagonal section with images

css

css-shapes