javascript - 使用 css 动态切割多边形 - 跨浏览器

Question

我正在尝试创建一个动态布局，其工作方式如下:http://i.stack.imgur.com/AL7JV.jpg

是的，这只是 css 和 html，并且在 chrome 中工作。我真正想做的是在所有其他浏览器中重现这一点。

我的想法是这个白框居中，占屏幕宽度和高度的 80%。文本溢出将通过滚动条解决，我真的不知道滚动条在哪里。我想将这两个元素分开，在两者之间留出空白，以便显示更多背景图像，但此时我已准备好放弃它。我什至无法在 mozilla 中完成这项工作。

我正在使用这样的东西:

.css-shapes-preview { 
width: 60%;
height: 100%;
float: right;
shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
background-image: url(IMG_0695.jpg);
background-size: cover;
background-position: center;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
}

当然不支持 chrome。这种布局可行还是我应该放弃它并考虑更简单的东西？

要求的代码:http://jsfiddle.net/rjz35xs8/1/

谢谢。

Answer 1

您可以接近，但我不确定您能否完成一项关键功能。我不认为有一种跨浏览器的方式可以让文本在非矩形区域内流动。不过，您可以完成剩下的所有工作。

下面的示例使用不同大小的边框的常用技巧来制作倾斜的边缘，然后使用绝对定位将文本放置在形状的顶部。

编辑:重新阅读问题后，也更新为百分比高度。

http://jsfiddle.net/a8aqs144/2

body, html{
    height: 100%;
    margin: 0;
    background-color: blue;
}
#outer{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
    min-width: 200px;
    height: 80%;
    background-color: white;
    background-image: url(http://placehold.it/50/50);
    overflow: hidden;
}
#left{
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 45%;
    border-right: 5000px solid transparent;
    border-bottom: 20000px solid yellow;
}
#content{
    position: absolute;
    top:0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-right: 55%;
    overflow: auto;
    text-align: justify;
}

<div id="outer">
    <div id="left">
    </div>
    <div id="content">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius consequat imperdiet. Duis eleifend lorem in nunc vestibulum placerat. Phasellus sagittis bibendum est non mattis. Aenean dictum metus vel feugiat eleifend. Maecenas id interdum dolor. Donec in molestie quam, nec commodo justo. Curabitur faucibus faucibus mi a viverra. Curabitur tempus pharetra erat, id interdum eros. Pellentesque at enim ac est feugiat placerat a sit amet risus. Duis a fermentum ante. Phasellus porta non tortor ut molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc scelerisque fermentum risus id venenatis. Quisque nisl justo, tempus sodales nulla scelerisque, hendrerit vestibulum nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In 
    </div>
</div>