텍스트 줄 바꿈을 위한 shape-outside

CSS 도형 모듈

shape-outside 요구 사항

<div class="circle-float"></div>
<p>Text wraps around the circular float, following the shape-outside boundary instead of the element's rectangular box, creating a natural flow around curved shapes for magazine-style layouts.</p>

shape-outside: circle()

<div class="profile-image"></div>
<p>Paragraph text wraps neatly around the circular profile image thanks to shape-outside matching the visual border-radius.</p>

shape-outside: ellipse()

<div class="cutout"></div>
<p>Text on the left flows around the elliptical shape on the right, curving inward and outward with the ellipse's boundary.</p>

shape-outside: polygon()

<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>

이미지와 함께 사용하는 shape-outside

<div class="character"></div>
<p>Text hugs the silhouette defined by the gradient's alpha channel, simulating shape-outside from an image mask.</p>

shape-margin

<div class="shape-float"></div>
<p>A 16px shape-margin adds breathing room between the circular float and the wrapping text.</p>

shape-image-threshold

디자인 활용 사례

브라우저 지원

실전 예제: 드롭 캡

<div><span class="drop-cap">T</span>his paragraph begins with a large drop cap letter that text wraps around using shape-outside on the enlarged first character, a classic print typography effect brought to CSS.</div>

빠른 확인

요약