多邊形文本區域自動換行，自動裁剪，沿着多邊形來排版

先來看個正六邊形的效果：

對應的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... 轉載請註明出處