css - 如何用CSS创建流体梯形图像？

Question

我在一个我们使用了视差效果的网站上工作。因为有一些图像是三 Angular 形的，像这样

& 图片是透明的，因为它和上面的DIV重叠了。我正在尝试使用 CSS 做很多事情。但没有得到想要的结果。我以固定宽度实现了预期的结果。检查这个http://jsfiddle.net/eJ7Sf/2/但不适用于流体宽度。检查我仍在尝试但没有奏效的内容

http://jsfiddle.net/ceGGN/3/

http://jsfiddle.net/eJ7Sf/1/

注意:我知道 css3 MASK属性，但它在 firefox 以前的浏览器中不起作用。我想要 firefox 3.6.13

之前的功能

Answer 1

更新的答案(纯 CSS3)

极端的要求有时需要极端的解决方案。我已经在我原来的答案(下面)的基础上制作了一个纯 css 解决方案可以工作(并且可以使工作更好，如果你想花时间在上面)。 current example在渲染时有点“断断续续”，这对你来说可能没问题，但如果不是，你将需要扩展 the already obscene number of @media queries正在驱动它(使用 LESS 或 SASS 可能更容易实现；我整理了一个公式驱动的 excel 电子表格来帮助快速生成数字)。它使用此代码:

HTML

<div class="box">
   <img src="yourImage.jpg" />
</div> 

CSS

.box{
    height:300px;  
    min-width: 100px; /*could be different, but you ought to have some min*/
    overflow:hidden;
}

.box img {
    height: 100%;
    width: 100%;   
    -ms-transform-origin: 100% 100%; /* IE 9 */
    -webkit-transform-origin: 100% 100%; /* Safari and Chrome */
    -moz-transform-origin: 100% 100%; /* Firefox */
    -o-transform-origin: 100% 100%; /* Opera */
    transform-origin: 100% 100%;
}

/*Sample... you need alot of these--my fiddle example has 51*/
@media screen and (min-width:  100px) { 
  .box { 
    -ms-transform:skewY(45deg); 
    -moz-transform:skewY(45deg); 
    -webkit-transform:skewY(45deg); 
    -o-transform:skewY(45deg); 
    transform:skewY(45deg); 
  } 
  .box img { 
    -ms-transform:skewY(-90deg); 
    -moz-transform:skewY(-90deg); 
    -webkit-transform:skewY(-90deg); 
    -o-transform:skewY(-90deg); 
    transform:skewY(-90deg);
  }
}

这里是计算度数的方法

假设 height: 300px 窄边大约 100px 高且梯形上的 Angular 相等。这意味着上下偏移量为 (300px - 100px)/2 = 100px。然后 .box Angular 根据以下公式设置 @media 查询 min-width 量:

Angle = arctan(100/min-width) /*100 is the upper/lower offset as above*/

对于.box img Angular 取Angle 并乘以-2。因此，这将生成您的 .box 和 .box img 媒体查询并转换为此伪代码:

@media screen and (min-width: [your target min-width]) { 
  .box {transform: skewY(Angle)}
  .box img {transform: skewY(-2*Angle)}
}

它运行的流畅程度完全取决于您对 min-width 进行更改以获得新 Angular 设置的微观尺度。正如我在上面的 CSS 代码中的评论中所述，我的示例使用了 51 个媒体查询调用，但仍然有些不稳定。

使用一些 javascript 解决方案会更好吗...可能，但这完全取决于设计者，所以我在这里提供这个纯粹是一个概念证明，它可以与纯CSS。

原始答案

This seems to be achieving a fluid width.我不知道你想要多少控制显示图像的多少或哪一部分，所以它可能不完全符合你的需要，但它确实使用变换制作了一个灵活的宽度图像，给它一个假的透视外观.