clip-path गुण

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

सिंटैक्स

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

मान

मान	विवरण
`circle`	तत्व को एक वृत्त में काटता है। पैरामीटर: त्रिज्या और केंद्र की स्थिति।
`ellipse`	तत्व को एक दीर्घवृत्त में काटता है। पैरामीटर: X/Y पर त्रिज्या और केंद्र की स्थिति।
`polygon`	तत्व को एक बहुभुज में काटता है। पैरामीटर: अल्पविराम से अलग किए गए बिंदुओं के निर्देशांक।
`url`	काटने के लिए SVG पथ का उपयोग करता है। पैरामीटर: SVG में पथ की ID।
`path`	पथ डेटा स्ट्रिंग का उपयोग करके SVG पथ के अनुसार तत्व को काटता है। पैरामीटर: SVG पथ स्ट्रिंग।
`inset`	गोल कोनों की संभावना के साथ एक आयत द्वारा तत्व को काटता है। पैरामीटर: ऊपर, दाएं, नीचे, बाएं से इंडेंट और गोलाई त्रिज्या।
`margin-box`	तत्व के बाहरी मार्जिन को कटिंग एरिया के रूप में उपयोग करता है।
`border-box`	तत्व की बॉर्डर को कटिंग एरिया के रूप में उपयोग करता है।
`padding-box`	तत्व के आंतरिक पैडिंग को कटिंग एरिया के रूप में उपयोग करता है।
`content-box`	तत्व की सामग्री (कंटेंट) को कटिंग एरिया के रूप में उपयोग करता है।
`none`	क्लिपिंग को अक्षम करता है (डिफ़ॉल्ट मान)।

उदाहरण

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

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

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

उदाहरण

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

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

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

उदाहरण

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

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

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

उदाहरण

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

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

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

उदाहरण

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

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

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

उदाहरण

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

<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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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;
}

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

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

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

.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;
}

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

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

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

.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;
}

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

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

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

.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%
	);
}

यह भी देखें

clip गुण,
एक आयत को काटने की अनुमति देता है
mask गुण,
तत्वों के लिए जटिल मास्क बनाने की अनुमति देता है
shape-outside गुण,
पाठ प्रवाह के आकार को परिभाषित करता है
filter गुण,
तत्वों पर ग्राफिकल प्रभाव लागू करता है