Question

我有一个带有背景图像的三角形，使用剪辑蒙版进行剪裁。它是基于百分比的，因此它在不同的屏幕上看起来不会太小/太大。

但是我希望三角形保持它的比例，因为屏幕宽度/高度会改变。

.upper-poly {
    position: absolute;
    width: 80%;
    height: 80%;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:                url(http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这是我所拥有的一个小提琴 - 关于如何使这项工作的想法......

http://jsfiddle.net/HrNC6/3/

Answer 1

这是一个可行的解决方案：

.upper-poly {
    position: absolute;
    width: 80%;
    height: 0%;
    padding-bottom: 80%;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:             url(http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

如果窗口纵横比太宽，则会切割三角形。

这是有效的，因为以百分比表示的垂直填充是根据父宽度而不是高度计算的。

如何保持基于百分比的剪切路径的宽高比？

1 个答案: