带图像的对角线部分

Question

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

Answer 1

您展示的模型中有几个问题。为了说清楚，我只会在右边的倾斜图像上添加：

在下面的示例中，图像容器是倾斜的，图像是＆＃34;未弯曲的＆＃34; ：

＆＃13;

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在左侧的倾斜文字之前，您可以查看以下问题：Align text on slanted shape