斜截面與圖像

Question

我一直試圖讓使用CSS對角線部分，但如果我用border屬性帶給我的問題

Answer 1

有你展示樣機的幾個問題。爲了明確這一點，我只會ADRESS右側傾斜圖片：

在下面的例子中，圖像容器歪斜和圖像「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>

前面左邊傾斜的文字，你可以看看這個問題：Align text on slanted shape