CSS Image Shapes

किसी photo को rectangle बने रहने की ज़रूरत नहीं है — border-radius और clip-path किसी image को एक circle, ellipse, triangle, या custom polygon में पूरी तरह CSS में crop कर सकते हैं, बिना किसी image-editing software के।

In this page:

border-radius से Circles और Ellipses
clip-path का परिचय
Polygon Shapes
Shape Changes को Animate करना
border-radius बनाम clip-path

Syntax

css

img {
  shape-outside: circle();
  float: left;
  border-radius: 50%;
}

border-radius से Circles और Ellipses

किसी square image पर border-radius: 50% set करना उसे एक perfect circle में crop कर देता है, जबकि किसी non-square image पर इसे लागू करने से इसके बजाय एक ellipse बनता है — यह सबसे simple shape technique है और बिना किसी vendor prefixes के हर modern browser में काम करती है।

Note:

Accepted values:
border-radius: 50% — square box पर circle, वरना ellipse
border-radius: <length> — fixed rounding
border-radius: A / B — horizontal / vertical radii
aspect-ratio: 1 — box को square रखता है

उदाहरण: Circles and Ellipses with border-radius

css

<style>
img {
  border-radius: 50%;
}
</style>
<img src="https://placehold.co/100x100" alt="Cropped into a circle">

clip-path का परिचय

clip-path circle(), ellipse(), polygon(), या inset() जैसे basic shape functions इस्तेमाल करके किसी element के लिए एक arbitrary visible region define करता है — defined shape के बाहर की कोई भी चीज़ बस clip हो जाती है, नीचे page background (या इसके पीछे जो कुछ भी है) को reveal करते हुए।

Note:

Accepted values:
clip-path: circle() — circular clip
clip-path: ellipse() — elliptical clip
clip-path: polygon() — कोई भी straight-edged shape
clip-path: inset() — rectangle, optionally rounded
clip-path: path() — एक SVG path string के साथ clip
clip-path: none — default, कोई clipping नहीं
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Introducing clip-path

css

<style>
img {
  clip-path: circle(50%);
}
</style>
<img src="https://placehold.co/150x150" alt="Clipped, revealing what's behind it">

Polygon Shapes

clip-path: polygon(...) x,y coordinate pairs की एक list लेता है जो listed points को element के box के चारों ओर order में जोड़कर एक custom straight-edged shape — एक triangle, एक diamond, एक hexagon, या एक arrow — define करती है।

Note:

Accepted values:
polygon(x y, x y, ...) — vertices की list, कम से कम तीन
polygon(evenodd, ...) — fill rule (default nonzero है)
<percentage> — reference box के relative
<length> — fixed offset

उदाहरण: Polygon Shapes

css

<style>
.triangle {
  width: 150px;
  height: 150px;
  background: teal;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
</style>
<div class="triangle"></div>

Shape Changes को Animate करना

क्योंकि clip-path values को transition किया जा सकता है, किसी element को hover करना उसकी clipped shape को एक polygon से दूसरे में smoothly morph कर सकता है (जब तक दोनों shapes में coordinate points की संख्या बराबर हो), एक technique जो सिर्फ border-radius से संभव नहीं है।

Note:

Accepted values:
clip-path: polygon(...) — जब point count match करे तो animatable
transition: clip-path 0.4s — change animate करता है
समान संख्या में points — smooth interpolation के लिए ज़रूरी
clip-path: none — interpolate नहीं किया जा सकता

उदाहरण: Animating Shape Changes

css

<style>
.shape {
  width: 150px;
  height: 150px;
  background: crimson;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.3s;
}
.shape:hover {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
</style>
<div class="shape"></div>

border-radius बनाम clip-path

border-radius सिर्फ corners को round करता है और rectangles-with-rounded-corners, circles, और ellipses के अलावा कुछ produce नहीं कर सकता, जबकि clip-path arbitrary polygon और curve-based shapes बना सकता है — जब भी desired shape कोई simple rounded rectangle या ellipse न हो तो clip-path इस्तेमाल करें।

उदाहरण: border-radius vs clip-path

css

<style>
.rounded {
  width: 100px;
  height: 100px;
  background: gray;
  border-radius: 20px;
}
.hexagon {
  width: 100px;
  height: 100px;
  background: gray;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
</style>
<div class="rounded"></div>
<div class="hexagon"></div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Centering Next Lesson → CSS Buttons

CSS Image Shapes

border-radius से Circles और Ellipses

clip-path का परिचय

Polygon Shapes

Shape Changes को Animate करना

border-radius बनाम clip-path

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code