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

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

सिंटैक्स

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

मान

उदाहरण

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

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

css.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 प्रॉपर्टी के माध्यम से मार्जिन सेट करें:

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

css.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 प्रॉपर्टी के बिना टेक्स्ट एक सर्कल के चारों ओर फ्लो होगा, लेकिन एलिमेंट की आकृति गोलाकार नहीं होगी:

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

उदाहरण

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

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

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

Результат:

यह भी देखें