非矩形文本（五边形或六边形）

问题描述

效果我想实现：

非常相似的问题：

潜在解决方案：

• - 有点过时 - 提到IE6和Netscape，没有提及Chrome

---

我们做得比这更好？

我设法找到这篇关于CSS形状的文章 - - 但他们尚未准备好迎接黄金时段 - - no IE，no Edge，no Firefox ...

解决方案

您尝试实现，属性将提供一个解决方案，但不幸的是，我知道的浏览器今天不支持它。

另一种方法是使用，目前仅支持现代webkit浏览器 p>

  p {width：400px; height：400px; text-align：justify; overflow：hidden;} span：before，span：after {content：'';} span：before {float：left; width：200px; height：400px; -webkit-shape-outside：多边形（100％0％，0％40％，50％100％，0 100％，0 0％）;外形：多边形（100％0％，0％40％，50％100％，0 100％，0 0％）;} span：{float：right; width：200px; height：400px; -webkit-shape-outside：多边形（0 0％，100％0％，100％100％，50％100％，100％40％）; shape-outside：polygon（0 0％，100％0％，100％100％，50％100％，100％40％）;}  

 < p>< span>< / span> Lorem ipsum dolor sit amet。 Vestibulum commodo volutpat a，convallis ac，laoreet enim。白茅发酵。花粉病。 Nulla imperdiet坐amet magna。 Vestibulum dapibus，mauris nec malesuada fames ac turpis velit，rhoncus eu，luctus et interdum adipiscing wisi。 Aliquam erat acipsum。整数倍数。 Quisque lorem tortor fringilla sed，vestibulum id，eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non，consectetuer lobortis quis，varius in，sapien massa ac turpis faucibus orci lusus non，consectetuer lobortis quis，varius in，lobortis quis，varius in ，sapien massa ac turpis faucibus orci lusus non，consectetuer lobortis quis，varius in，lobortis quis，varius in，sapien massa ac turpis faucibus orci lusus non，consectetuer lobortis quis，varius in，lobortis quis，varius in，sapien massa ac turpis faucibus在
  
 

有关浏览器支持，请参阅

Effect I want to achieve:

Very similar questions:

• How can I wrap text around a non rectangular image? - but the other way around (they want to wrap text around, I want to keep text inside)
• Wrapping text around non-rectangular shapes css/html

Potential solutions:

• http://www.csstextwrap.com/ - a bit dated - mentions IE6 and Netscape, does not mention Chrome
• http://baconforme.com/

---

As in Novemeber 2015 - can we do better than that?

I managed to find this article about CSS shapes - http://www.chenhuijing.com/blog/why-you-should-be-excited-about-css-shapes/ - but they are not ready for prime time yet - http://caniuse.com/#feat=css-shapes - no IE, no Edge, no Firefox...

解决方案

Considering the shape you are trying to achieve, the shape-inside property would provide a solution but unfortunatly, no browser I know of supports it today.

Another approach would be to use the shape-outside property which is currently supported by modern webkit browsers only :

p{
    width:400px; height:400px;
    text-align:justify;
    overflow:hidden;
}

span:before, span:after {
  content:'';
}
span:before{
    float:left;
    width:200px; height:400px;
    -webkit-shape-outside: polygon(100% 0%, 0% 40%, 50% 100%, 0 100%, 0 0%);
    shape-outside: polygon(100% 0%, 0% 40%, 50% 100%, 0 100%, 0 0%);
}
span:after{
    float:right;
    width:200px; height:400px;
    -webkit-shape-outside: polygon(0 0%, 100% 0%, 100% 100%, 50% 100%, 100% 40%);
    shape-outside: polygon(0 0%, 100% 0%, 100% 100%, 50% 100%, 100% 40%);
}

<p><span></span>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, lobortis quis, varius in,sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, lobortis quis, varius in,sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, lobortis quis, varius in,sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in</p>

For browser support, see canIuse

这篇关于非矩形文本（五边形或六边形）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！