clip-path गुण

clip-path गुण तत्व के प्रदर्शन क्षेत्र को परिभाषित करता है, इसे दिए गए आकार में काटकर। यह पैरामीटर के रूप में एक कटिंग फ़ंक्शन या SVG पथ स्वीकार करता है।

सिंटैक्स

cssसिलेक्टर {
  clip-path: कटिंग फ़ंक्शन;
}

मान

उदाहरण

एक षट्कोण के आकार में तत्व को काटें:

html<div id="hexagon"></div>

css#hexagon {
  width: 200px;
  height: 200px;
  background: #3498db;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

Результат:

उदाहरण

तत्व को एक वृत्त में काटें:

html<div id="circle"></div>

css#circle {
  width: 200px;
  height: 200px;
  background: #2ecc71;
  clip-path: circle(40% at 50% 50%);
}

Результат:

उदाहरण

तत्व को एक दीर्घवृत्त में काटें:

html<div id="ellipse"></div>

css#ellipse {
  width: 200px;
  height: 150px;
  background: #9b59b6;
  clip-path: ellipse(25% 40% at 50% 50%);
}

Результат:

उदाहरण

गोल कोनों के साथ तत्व को काटें:

html<div id="inset"></div>

css#inset {
  width: 200px;
  height: 200px;
  background: #e67e22;
  clip-path: inset(20% 15% 10% 5% round 10px);
}

Результат:

उदाहरण

तत्व को एक वृत्त में काटें:

html<div id="path"></div>

css#path {
  width: 200px;
  height: 200px;
  background: #3498db;
  clip-path: path('M20,20 L180,20 L160,180 L40,180 Z');
}

Результат:

उदाहरण

जटिल क्लिपिंग के लिए SVG पथ का उपयोग:

html<svg width="0" height="0">
  <clipPath id="star-path">
    <path d="M50 0 L61 35 L98 35 L68 57 L79 92 L50 70 L21 92 L32 57 L2 35 L39 35 Z"/>
  </clipPath>
</svg>
<div id="star"></div>

css#star {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  clip-path: url(#star-path);
}

Результат:

उदाहरण . त्रिकोण

त्रिकोण के आकार में काटें:

html<div id="triangle"></div>

css#triangle {
  width: 200px;
  height: 200px;
  background: #e74c3c;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Результат:

उदाहरण . संयुक्त आकृतियाँ

एक जटिल आकार बनाना:

html<div id="combined"></div>

css#combined {
  width: 250px;
  height: 250px;
  background: #2ecc71;
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 75%,
    75% 75%, 75% 100%, 50% 75%,
    0% 75%
  );
}

Результат:

उदाहरण . क्लिप किए गए पाठ के साथ

एक पाठ ब्लॉक को काटें:

html<div id="text-clip">
  <p>CSS clip-path अद्भुत प्रभाव बनाता है!</p>
</div>

css#text-clip {
  width: 300px;
  padding: 20px;
  background: #3498db;
  color: white;
  font-size: 24px;
  clip-path: ellipse(120px 80px at 50% 50%);
}

Результат:

उदाहरण . छवि की गोलाकार क्लिपिंग

एक वृत्त में छवि को काटना:

html<div class="image-clip-circle">
  <img src="img.png">
</div>

css.image-clip-circle img {
  width: 200px;
  height: 200px;
  clip-path: circle(50% at center);
  object-fit: cover;
}

Результат:

उदाहरण . छवि की तारे के आकार की क्लिपिंग

पांच-नुकीले स्टार के आकार में छवि को काटना:

html<div class="image-clip-star">
  <img src="img.png">
</div>

css.image-clip-star img {
  width: 200px;
  height: 200px;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  object-fit: cover;
}

Результат:

उदाहरण . छवि की षट्कोणीय क्लिपिंग

षट्कोण के आकार में छवि को काटना:

html<div class="image-clip-hexagon">
  <img src="img.png">
</div>

css.image-clip-hexagon img {
  width: 200px;
  height: 200px;
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
  object-fit: cover;
}

Результат:

उदाहरण . दिल के आकार में क्लिपिंग

दिल के आकार में छवि को काटना:

html<div class="image-clip-heart">
  <img src="img.png">
</div>

css.image-clip-heart img {
  width: 200px;
  height: 180px;
  clip-path: polygon(
    50% 15%,
    35% 5%,
    15% 15%,
    10% 35%,
    25% 60%,
    50% 80%,
    75% 60%,
    90% 35%,
    85% 15%,
    65% 5%
  );
  object-fit: cover;
}

Результат:

उदाहरण . होवर पर छवि क्लिपिंग

होवर करने पर क्लिपिंग आकार बदलना:

html<div class="image-clip">
  <img src="img.png">
</div>

css.image-clip {
  display: inline-block;
}
.image-clip img {
  width: 200px;
  height: 200px;
  clip-path: circle(40% at 50% 50%);
  object-fit: cover;
  transition: clip-path 0.5s ease;
}
.image-clip:hover img {
  clip-path: polygon(
    50% 0%,
    90% 20%,
    100% 60%,
    75% 100%,
    25% 100%,
    0% 60%,
    10% 20%
  );
}

Результат:

यह भी देखें