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

我正在一个使用视差效应的网站上工作.因为有一些三角形的图像,像这样

&安培;图像是透明的,因为它与上面的DIV重叠.我正在尝试这么多东西与css.但没有得到预期的结果.我实现了固定宽度的期望结果.检查这个http://jsfiddle.net/eJ7Sf/2/,但不能使用流体宽度.检查我仍然尝试,但没有工作

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

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

注意：我知道css3 MASK 属性,但它在Firefox Firefox以前的浏览器中不起作用.我想要的功能,直到firefox 3.6.13

解决方法

更新答案(纯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);
  }
}

以下是计算度数的方法

假设高度：300px,窄边大约100px高,梯形上的角度相等.这意味着上下偏移量为(300px – 100px)/ 2 = 100px.然后根据以下公式将.Box角度设置为@media查询最小宽度量：

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

对于.Box img角度取角度乘以-2.所以这将产生您的.Box和.Box img媒体查询和转换为这个伪代码：

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

它的功能如何顺利完全取决于微尺度如何使您的最小宽度更改以获得新的角度设置.正如我在上面的CSS代码的评论中所说,我的例子使用51个媒体查询调用,并且仍然有一些困难.

使用某些JavaScript解决方案可能会更好吗？可能,但这完全取决于设计师,所以我在这里提供纯粹的概念证明,可以使用纯css.

原始答案

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

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

解决方法

相关文章