多边形文本区域自动换行，自动裁剪，沿着多边形来排版

先来看个正六边形的效果：

对应的HTML是：

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
    <p>
        这是一段文本。这是一段文本。
        这是一段文本。这是一段文本。
        这是一段文本。这是一段文本。
        这是一段文本。这是一段文本。
        这是一段文本。这是一段文本。
        这是一段文本。这是一段文本。
    </p>
</div>

对应的css是：

<style>
    .main {
        width: 13em;
        text-align: center;
    }
    .left, .right {
        width: 29.3%;
        height: 13em;
        background-color: lightgray;
    }
    .left3,.right3{
        width: 1px;
    }
    .left {
        -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);
        shape-outside: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);
        float: left;
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);
        clip-path: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);
    }
    .right {
        -webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);
        shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);
        float: right;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);
    }
    p {
        text-align: center;
    }
</style>

本文首发地址：https://www.clarencep.com/201... 转载请注明出处