CSS实现多边形文本区域自动换行,自动裁剪,沿着多边形来排版

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

对应的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>
打赏

发表评论

电子邮件地址不会被公开。 必填项已用*标注