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

＆＃13;

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

＆＃13;

<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>

＆＃13;

用css动态剪切多边形 - 跨浏览器

1 个答案: