17

我正在一个我们使用视差效果的网站上工作。因为有一些图像是三角形的，像这样在此处输入图像描述

& 图像是透明的，因为它与上面的 DIV 重叠。我正在用 css 尝试很多东西。但没有得到想要的结果。我以固定宽度实现了预期的结果。检查此http://jsfiddle.net/eJ7Sf/2/ 但不适用于流体宽度。检查我仍在尝试但没有奏效的方法

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

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

注意：我知道 css3 MASK属性，但它不适用于 firefox 以前的浏览器。我想要Firefox 3.6.13之前的功能

4

3 回答 3

8

更新的答案（纯 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抵消：@mediamin-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 一起使用。

原始答案

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

于 2012-04-01T18:42:25.810 回答
5

使用 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=""/>

于 2016-04-13T15:05:06.840 回答
3

如果你玩一下pseudoelementsand 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);
}

我使用白色为旋转的伪元素着色，但是，当然，您可以更改颜色，使其适合真实的背景颜色

于 2012-04-02T14:10:47.403 回答