SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shape-outside 示例</title>
    <style>
        .trapezoid {
            float: left; /* 使用浮动让内容环绕 */
            width: 200px; /* 固定宽度或使用百分比 */
            height: 200px;
            background-color: lightblue;
            shape-outside: polygon(20% 0, 80% 0, 100% 100%, 0 100%); /* 定义形状 */
            clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); /* 可选：裁剪元素形状 */
        }
        span{
            border: 1px solid #f00;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="trapezoid"></div>
        <span>这里是内容示例</span>
        <span>这段文本将围绕梯形元素流动。</span>
        <span>这段文本将围绕梯形元素流动。</span>
        <span>123</span>
        <span>这里是内容示例。这段文本将围绕梯形元素流动。使用 `shape-outside` 属性可以定义元素周围的形状，从而影响文本的流动路径。尽管 `shape-outside` 不能真正裁剪元素的形状，但它对于内容环绕和视觉布局仍然非常有用。为了实现完整的视觉效果，我们同时使用了 `clip-path` 属性。</span>
    </div>
</body>
</html>