我正在一个我们使用视差效果的网站上工作。其中有一些是三角形的图像,如
&安培;图像是透明的,因为它与上面的DIV重叠。我用css尝试了很多东西。但没有得到理想的结果。我用固定的宽度达到了预期的效果。检查此http://jsfiddle.net/eJ7Sf/2/但不适用于流体宽度。检查我仍然尝试但没有工作
注意:我知道css3 MASK属性,但它在firefox以前的浏览器中不起作用。我希望能力直到 firefox 3.6.13
答案 0 :(得分:8)
极端要求有时需要极端的解决方案。我已经在我的原始答案(下面)上构建了一个有效的纯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
在梯形上具有相同的角度。这意味着上下偏移量为(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
This seems to be achieving a fluid width.我不知道你想要多少或者想要显示图像的多少部分,所以它可能不完全符合你的需要,但它确实可以使用灵活的宽度图像转换为假的透视外观。
答案 1 :(得分:4)
您可以使用inline SVG和clipPath element:
来实现此形状
<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 property来实现此形状。浏览器支持非常低(参见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=""/>
答案 2 :(得分:3)
如果您使用pseudoelements
和2DTransforms
(supported since 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);
}
我使用白色为旋转的伪元素着色,但当然,您可以更改颜色以使其适合真实的背景颜色