html代码设置五边形,html – 非矩形形状内的文本(五边形或六边形)

考虑到你想要实现的形状,

shape-inside属性将提供一个解决方案但不幸的是,我所知道的浏览器今天都不支持它.

另一种方法是使用目前仅由现代webkit浏览器支持的shape-outside property：

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%);

}

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

有关浏览器支持,请参阅canIuse