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

Question

我正在一个我们使用视差效果的网站上工作.在那里有一些像三角形的图像,像这样

&图像是透明的,因为它与上面的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解决方案(如果你想在其中投入时间,可以使其更好地工作).在当前的例子是在渲染,这可能是您可以接受有点"波涛汹涌",但如果没有,则需要延长的已经淫秽号@media查询正在推动它(它可能会更容易使用,以实现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高而且相等的角度.这意味着上下偏移量是(300px - 100px) / 2 = 100px.然后根据以下公式将.box角度设置为@media查询min-width量:

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

对于.box img角度采取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以获得新的角度设置.正如我在上面的CSS代码中的评论中所述,我的示例使用51个媒体查询调用,但仍然有一些不稳定.

是否更好地使用一些javascript解决方案...可能,但这完全取决于设计师,所以我在这里提供这纯粹的概念证明,它可以使用纯css.

原始答案

这似乎达到了流动宽度.我不知道你想要多少或者想要显示图像的多少部分,所以它可能不完全符合你的需要,但它确实使用变换来制作灵活的宽度图像,使其具有虚假的透视外观.

Answer 2

使用 SVG 剪辑路径

您可以使用内联 SVG和clipPath 元素实现此形状：

<svg viewbox="0 0 10 6.7">
  <defs>
    <clipPath id="clip">
      <polygon points="10 0, 10 6.7, 0 4.7, 0 2" />
    </clipPath>
  </defs>
  <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>

使用 CSS 剪辑路径

您还可以使用CSS clip-path 属性实现此形状。浏览器支持非常低（请参阅canIuse），但这是一种简单的方法。
这是一个例子：

img{
  -webkit-clip-path:polygon(0% 20%, 100% 0%,100% 100%,0% 80%);
  clip-path:polygon(0% 20%, 100% 0%,100% 100%,0% 80%);
}

<img src="http://i.imgur.com/5NK0H1e.jpg" alt=""/>