CSS Shapes
एक magazine article की कल्पना करें जहाँ text एक rectangular box पर सिर्फ रुकने के बजाय elegantly एक circular photo के चारों ओर wrap होता है। वह flowing, custom-shaped wrap ठीक वही चीज़ है जो CSS Shapes module web पर संभव बनाता है।
नार्मल रूप से, floated content एक plain rectangle में wrap होता है, चाहे floated element visually जो भी shape हो। shape-outside property इसे बदल देता है: यह एक custom geometry define करता है, जैसे एक circle या polygon, जिसके चारों ओर आस-पास का inline content (ज़्यादातर text) इसके बजाय flow करता है।
यह cookiescursor.com जैसी किसी site पर editorial-style layouts के लिए एक subtle लेकिन genuinely delightful effect है, text columns को एक ज़्यादा organic, magazine-जैसा feel देते हुए।
In this page:
Syntax
selector {
float: left;
shape-outside: circle() | ellipse() | polygon(points);
}CSS Shapes क्या है?
CSS Shapes module floated content को browsers द्वारा default रूप से इस्तेमाल किए जाने वाले plain rectangular wrap के बजाय एक custom geometric shape इस्तेमाल करके आस-पास के inline content के wrap को influence करने देता है।
Note:
- Shapes cookiescursor.com पर editorial या article layouts के लिए बेहतरीन fit हैं जहाँ किसी photo या icon को text के flow में integrated महसूस होना चाहिए।
- Accepted values:
- circle() — circular float shape
- ellipse() — elliptical shape
- inset() — optional rounded corners वाला rectangle
- polygon() — coordinate pairs से custom shape
- url() — किसी image के alpha channel से shape
- margin-box | border-box | padding-box | content-box — reference box keywords
- none — rectangular float area (default)
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
shape-outside का कोई visible effect नहीं होता जब तक जिस element पर यह लागू है वह भी floated न हो।
उदाहरण: What Is CSS Shapes?
<style>
img {
float: left;
shape-outside: circle(50%);
}
</style>
<img src="https://placehold.co/150x150" alt="Floated">
<p>Text wraps around a custom shape, not a plain rectangle</p>Basic Shapes के साथ shape-outside
shape-outside circle(), ellipse(), और polygon() जैसे basic shape functions accept करता है, हर एक clip-path द्वारा इस्तेमाल की गई वही syntax से wrap boundary define करते हुए। हर shape function वही coordinate syntax accept करता है चाहे वह shape-outside के लिए इस्तेमाल हो या clip-path से clipping के लिए।
Note:
- अगर आप पहले से clip-path की basic shape syntax जानते हैं, तो shape-outside बिल्कुल वही functions इस्तेमाल करता है, इसलिए skills सीधे transfer हो जाती हैं।
- Accepted values:
- shape-outside: none — default, text box को wrap करता है
- shape-outside: circle() | ellipse() | polygon() | inset() — basic shapes
- shape-outside: url(image.png) — image के alpha इस्तेमाल करता है
- shape-outside: margin-box | border-box | padding-box | content-box — box keywords
- नोट: float चाहिए
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
एक shape और उसके element की visible appearance दो अलग चीज़ें हैं; shape-outside अपने आप कुछ भी visually clip नहीं करता।
उदाहरण: shape-outside with Basic Shapes
<style>
.icon {
float: left;
width: 150px;
height: 150px;
background: coral;
shape-outside: polygon(0 0, 100% 0, 0 100%);
}
</style>
<div class="icon"></div>
<p>Wraps around the polygon boundary</p>shape-margin
shape-margin shape के edge और उसके चारों ओर wrap होने वाले content के बीच space जोड़ता है, इसी spirit में जैसे साधारण margin किसी regular box के आस-पास space जोड़ता है। shape-margin के बिना, wrapped text shape के edge के बिल्कुल सटे हुए बिना किसी breathing room के खत्म हो सकता है।
Note:
- एक छोटा shape-margin, लगभग 8px से 16px, आमतौर पर wrapped text को किसी curved edge के खिलाफ बहुत tightly hugged महसूस करने से रोकता है।
- Accepted values:
- shape-margin: 0 — default
- shape-margin: <length> — shape से extra distance
- shape-margin: <percentage> — container width के relative
- नोट: किसी float पर shape-outside के साथ काम करता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
shape-margin सिर्फ wrap distance को असर करता है, यह shape के अपने size या position को नहीं बदलता।
उदाहरण: shape-margin
<style>
img {
float: left;
shape-outside: circle(50%);
shape-margin: 16px;
}
</style>
<img src="https://placehold.co/150x150" alt="Floated">
<p>Extra breathing room between the shape and the wrapped text</p>किसी Circle के चारों ओर Text Wrap करना
एक circular shape-outside CSS Shapes के सबसे common इस्तेमालों में से एक है, किसी rounded photo या icon को एक natural text wrap देते हुए जो plain floats अपने आप नहीं achieve कर सकते। float के साथ combined, यह एक visually striking layout बनाता है जो plain rectangular box से achieve करना मुश्किल है।
Note:
- shape-outside: circle(50%) को एक matching border-radius: 50% के साथ जोड़ें ताकि visual shape और wrap shape perfectly align हों।
- Accepted values:
- shape-outside: circle(50%) — circular text wrap
- float: left | right — shape-outside के लिए ज़रूरी
- border-radius: 50% — box को भी circular दिखाता है
- width और height — float पर defined होनी चाहिए
Warning:
अगर shape और visible element match नहीं करते (जैसे एक circular shape-outside वाली square image), तो text invisible खाली space के चारों ओर wrap होगा।
उदाहरण: Wrapping Text Around a Circle
<style>
img {
float: left;
shape-outside: circle(50%);
border-radius: 50%;
width: 150px;
height: 150px;
}
</style>
<img src="https://placehold.co/150x150" alt="Round photo">
<p>Text wraps around the round photo naturally</p>किसी Image के साथ shape-outside
shape-outside अपनी shape सीधे किसी image के alpha channel से भी derive कर सकता है, यानी wrap किसी हाथ से लिखे shape function के बजाय PNG के असली transparent और opaque areas को follow करता है।
Note:
- Image-based shapes उन images के साथ सबसे अच्छा काम करते हैं जिनका किसी irregular subject के आस-पास genuinely transparent background है, जैसे कोई logo या icon cutout।
- Accepted values:
- shape-outside: url(<image>) — image के alpha channel का इस्तेमाल करता है
- shape-image-threshold: <number> — alpha cutoff, default 0
- float: left | right — ज़रूरी
- नोट: image CORS-accessible होनी चाहिए
Warning:
Image-derived shapes को पहले image को सफलतापूर्वक load होना चाहिए; तब तक, browser एक plain rectangular wrap पर fall back हो जाता है।
उदाहरण: shape-outside with an Image
<style>
img {
float: left;
width: 150px;
height: 150px;
shape-outside: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27150%27 height=%27150%27%3E%3Ccircle cx=%2775%27 cy=%2775%27 r=%2775%27 fill=%27%23e53935%27/%3E%3C/svg%3E");
shape-margin: 12px;
}
</style>
<img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27150%27 height=%27150%27%3E%3Ccircle cx=%2775%27 cy=%2775%27 r=%2775%27 fill=%27%23e53935%27/%3E%3C/svg%3E" alt="A solid red circle">
<p>The text wraps around the circle's actual opaque pixels, not the image's rectangular box. Resize the window to see the wrap reflow.</p>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- यह उम्मीद करना कि shape-outside उसी element पर float set किए बिना काम करेगा, इसका असर सिर्फ floated elements पर होता है।
- shape-outside (जो असर करता है कि text कैसे wrap होता है) को clip-path (जो असर करता है कि क्या visually render होता है) के साथ confuse करना।
- shape-margin भूल जाना, जो wrapped text को shape के edge के असुविधाजनक रूप से करीब छोड़ देता है।
चैप्टर सारांश
- shape-outside बदल देता है कि inline content किसी floated element के चारों ओर कैसे wrap होता है, एक plain rectangle के बजाय एक custom shape इस्तेमाल करते हुए।
- circle(), ellipse(), और polygon() जैसे basic shapes सीधे CSS में wrap geometry define करते हैं।
- shape-margin shape के edge और उसके चारों ओर wrap होने वाले text के बीच breathing room जोड़ता है।
ब्राउज़र सपोर्ट
Basic shape functions वाली CSS Shapes हर modern browser द्वारा supported हैं।
🔒
Chapter Quiz — Complete all 22 topics to unlock
0/22 topics done
Complete these topics first:
- CSS Gradients
- CSS Shadows
- CSS Filters
- CSS Blend Modes
- CSS Transforms
- CSS 2D Transforms
- CSS 3D Transforms
- CSS Transitions
- CSS Animations
- CSS Image Styling
- CSS Image Effects
- CSS Hover Overlays
- CSS Image Modal
- CSS Image Centering
- CSS Image Shapes
- CSS Buttons
- CSS Columns
- CSS Clip Path
- CSS Shapes
- CSS Scroll Snap
- CSS Architecture: BEM
- CSS Custom Properties