如何使用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之前实现此功能

- sandeep

---

为什么你在包含 -moz-、-webkit- 和 -o- 选项，但却不包括 -ms-？你知道 IE9 完全能够处理变换。 - Niet the Dark Absol

@Kolink 首先我考虑如何达到期望的结果，然后我会在其他浏览器上进行测试。 - sandeep

按照这种推理，你只需要测试的那个。 - Niet the Dark Absol

我可能是唯一一个不确定你想要什么的人。你想让它在保持图像纵横比的同时按比例缩放吗？ - Matthew Blancarte

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

以下是如何计算角度的方法

假设梯形的高度为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的概念证明。

原始答案

这似乎实现了一个流体宽度。 我不知道您想要多少控制图像的显示部分或者哪一部分被显示，因此可能并不完全符合您的需求，但它确实使用变换来创建一个具有虚假透视效果的灵活宽度图像。

- ScottS

---

当您增加窗口大小时，它变成了一个纯三角形。但这不是我想要的。请看图像。但还是谢谢您的努力 :) - sandeep

@sandeep--所以你希望左右两边的高度始终相同？顺便说一句，那并不是一个三角形（就像你的标题所说）而是一个梯形。 - ScottS

@sandeep--or 每一侧的高度是否随着宽度的变化而改变？换句话说，您是打算仅更改角度还是角度固定，高度随着宽度变化而改变（其中之一必须改变）？ - ScottS

高度相同，看起来像梯形。 - sandeep

@sandeep--我更新了我的答案。它可以工作，但是你可以决定是否值得这样做，特别是如果你想让它在渲染方面更加流畅。 - ScottS

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 clip-path实现

您还可以使用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=""/>

- web-tiki

Answer 3

如果您使用pseudoelements和2DTransforms（自Firefox 3.5开始支持），您可以实现此效果：http://jsfiddle.net/fcalderan/T5KPA/1/ 我在Chrome和Firefox上尝试过。对于Opera和IE9，您需要添加专有前缀。

标记非常重要：

<figure class="triangle">
    <img src="http://cssglobe.com/lab/angled/img.jpg">
</figure>

并且使用CSS来实现这个效果：

img { display: block; }

.triangle { 
   position   : relative; 
   overflow   : hidden; 
   padding    : 0; margin: 0; 
   display    : inline-block; 
}

.triangle:after,
.triangle:before {
   content    : "";
   position   : absolute;
   z-index    : 2;
   left       : -50%;
   width      : 200%;
   height     : 40%;
   display    : block;
   background : #fff;   
}

.triangle:before {
    top: -24%;  
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

.triangle:after {
    bottom: -24%;  
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
}

我使用白色来着色旋转的伪元素，但是你可以根据实际背景颜色更改颜色。

- Fabrizio Calderan

---

@sandeep，这种解决方案可以接受吗？还是需要进一步完善？ - Fabrizio Calderan

抱歉，这不是流式的。这不是我想要的。 - sandeep

请问您能否进一步解释一下吗？我该如何修改我的示例以查看哪里出了问题？ - Fabrizio Calderan

我为figure和img都添加了width:100%。请尝试http://jsfiddle.net/fcalderan/T5KPA/4/并调整窗口大小。 - Fabrizio Calderan

如果您还将高度设置为img和figure的100％，则此大小取决于父元素的高度。但是，如果您使用相对大小（以％为单位），则应该获得流体元素。 - Fabrizio Calderan