http://codepen.io/anon/pen/YXePBY
<div>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>
div {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(0 0,78% 0,93% 99%,0% 100%);
clip-path: polygon(0 0,0% 100%);
padding: 15px
}
/* Center the demo */
html,body { height: 100%; }
body {
display: flex;
justify-content: center;
align-items: center;
}
我想要的是,div中的文本在到达边界时会获得换行符.
这怎么可能？
以及如何获得最高的浏览器兼容性？
有没有办法用SVG做到这一点？
解决方法
剪辑路径应用于元素,无论其内容如何.它是元素外边界的定义,但定义了元素在其边界内的截断方式,因此文本的行为不像您期望的那样.它仍然需要元素是一个盒子,因为目前在css中,所有东西都是盒子.
但是有可能.这两篇文章here和here进入了所需的细节.首先,使用css形状声明定义元素.然后使用与多边形定义具有相同定义的剪辑路径剪切掉影响形状的任何背景
摘自第一篇文章(并方便地接近你想要的)：
.shaped{
/*...*/
shape-outside: polygon(0 0,100% 0,100% 100%,30% 100%);
shape-margin: 20px;
clip-path: polygon(0 0,30% 100%);
}
我们可以看到它非常简单,形状被定义为多边形,它的行为与任何其他块一样,除了它具有多边形边缘而不是块边缘.然后浮动元素将导致文本在其周围流动.
这是一个示例at JSFiddle *(需要-webkit-前缀,以及像Google Chrome这样的WebKit浏览器).通过查看this JSFiddle *,在应用剪辑路径之前,您可以看到为什么有必要.在我的例子中,.shaped和.text都保存在同一个容器中,但是作为兄弟姐妹.文本在它的兄弟周围流动而不是扩展以填充它的容器.容器本身和背景颜色的使用在模型中实现了效果. (您可能需要调整JSFiddle面板大小以挤压或拉伸物体并清楚地看到效果).
不幸的是,css形状非常新鲜.快速浏览一下caniuse.com,显示当前浏览器中只有一半支持这些.甚至Firefox在当前版本中根本没有实现.至于IE ……
我建议你使用css形状作为默认设置并让新浏览器处理它(Firefox很快就会赶上我很确定)但提供某种类似于Modernizr的browser feature detection method以决定是否应用后备将两个部分显示为没有倾斜的块.
