使用CSS Shapes应该可以。不幸的是,浏览器支持尚不存在(它仅适用于 Safari 和 Chrome),因此您可能需要一个polyfill。
我添加了一个小代码片段,展示了它如何使用您的图像进行工作。请注意,由于CORS问题,我必须使用 data-uri 内联图像。
body {
font-family: Helvetica, Arial;
color: #333;
}
.container {
width: 500px;
margin: 0 auto;
}
.shape {
float: left;
shape-margin: 10px;
shape-outside: url('data:image/png;base64,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');
}Run Code Online (Sandbox Code Playgroud)
<div class="container">
<img src="https://i.stack.imgur.com/5b0qi.png" class="shape" />
<div class="text">
<p>
Bacon ipsum dolor amet rump kielbasa kevin tail. Chuck sirloin bresaola, swine andouille ham hock meatloaf pancetta jerky meatball corned beef shankle ribeye chicken beef ribs. Tenderloin pastrami sirloin corned beef, short ribs pancetta shoulder chicken
porchetta ham ball tip kielbasa. Tri-tip porchetta meatloaf ground round sausage, pork loin shankle chicken. Turkey beef ribs capicola andouille pancetta. Beef ribs kevin venison ham ham hock sirloin, rump fatback shankle pork chop pastrami tri-tip
andouille.
</p>
<p>
Doner chicken bacon short ribs venison salami andouille biltong pig. Turkey bacon andouille shoulder kevin. Ham hock rump bacon corned beef, t-bone kevin tongue jerky meatball ground round ribeye tri-tip. Turkey swine bresaola prosciutto beef, porchetta
short ribs drumstick. Meatball pork ribeye ham hock venison turducken.
</p>
</div>
</div>Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
25039 次 |
| 最近记录: |