css - 带图像的对 Angular 线剖面

Question

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

Answer 1

您展示的模型中有几个问题。为了清楚起见，我只会处理右侧倾斜的图像:

在以下示例中，图像容器是倾斜的，而图像是“未倾斜的”:

#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>

在左边的倾斜文字之前，你可以看一下这个问题:Align text on slanted shape