shape-outside प्रॉपर्टी

shape-outside प्रॉपर्टी फ्लोटिंग एलिमेंट्स के लिए गैर-मानक फ्लो आकृतियाँ निर्दिष्ट करने की अनुमति देती है। आसन्न एलिमेंट्स एक आयताकार कंटेनर के बजाय निर्दिष्ट आकृति के चारों ओर फ्लो होंगे।

सिंटैक्स

सिलेक्टर {
	shape-outside: मान;
}

मान

मान	विवरण
`circle()`	गोलाकार फ्लो आकृति
`ellipse()`	अण्डाकार फ्लो आकृति
`polygon()`	मनमाना बहुभुज आकृति
`url()`	छवि के अल्फा चैनल पर आधारित आकृति
`margin-box`	मार्जिन की सीमाओं का उपयोग करें (डिफ़ॉल्ट मान)

उदाहरण

आइए एक फ्लोटिंग एलिमेंट के लिए एक गोलाकार फ्लो आकृति बनाएं। shape-outside और clip-path प्रॉपर्टीज़ का उपयोग करें:

<div class="shape"></div>
<p>
	some long text
</p>

.shape {
	width: 150px;
	height: 150px;
	float: left;
	shape-outside: circle(50%);
	clip-path: circle(50%);
	background: #3498db;
}

p {
	width: 500px;
	text-align: justify;
}

उदाहरण

shape-margin प्रॉपर्टी के माध्यम से मार्जिन सेट करें:

<div class="shape"></div>
<p>
	some long text
</p>

.shape {
	width: 150px;
	height: 150px;
	float: left;
	shape-outside: circle(50%);
	shape-margin: 10px;
	clip-path: circle(50%);
	background: #3498db;
}

p {
	width: 500px;
	text-align: justify;
}

उदाहरण

clip-path प्रॉपर्टी के बिना टेक्स्ट एक सर्कल के चारों ओर फ्लो होगा, लेकिन एलिमेंट की आकृति गोलाकार नहीं होगी:

<div class="shape"></div>
<p>
	some long text
</p>

.shape {
	width: 150px;
	height: 150px;
	float: left;
	shape-outside: circle(50%);
	background: #3498db;
}

p {
	width: 500px;
	text-align: justify;
}

उदाहरण

एलिमेंट की एक अलग आकृति:

<div class="shape"></div>
<p>
	some long text
</p>

.shape {
	width: 200px;
	height: 200px;
	background-color: #4CAF50;
	float: left;
	shape-outside: polygon(0% 0%, 100% 50%, 0% 100%);
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
	margin-right: 20px;
	margin-bottom: 20px;
}

p {
	width: 500px;
	text-align: justify;
}

उदाहरण

एलिमेंट की एक अलग आकृति:

<div class="shape"></div>
<p>
	some long text
</p>

.shape {
	width: 200px;
	height: 200px;
	background-color: #4CAF50;
	float: left;
	shape-outside: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	margin-right: 20px;
	margin-bottom: 20px;
}

p {
	width: 500px;
	text-align: justify;
}

यह भी देखें

clip-path प्रॉपर्टी,
जो एलिमेंट की दृश्यमान आकृति बनाती है
float प्रॉपर्टी,
जो shape-outside के काम करने के लिए आवश्यक है
shape-margin प्रॉपर्टी,
जो आकृति के चारों ओर मार्जिन जोड़ती है