CSS polygon() ఫంక్షన్

నిర్వచనం మరియు ఉపయోగం

CSS polygon() ఫంక్షన్లు ఒక పరిమితిని నిర్దేశించడానికి ఉపయోగించబడతాయి.

polygon() ఫంక్షన్లు మరియు clip-path అట్రిబ్యూట్లు మరియు shape-outside అట్రిబ్యూట్లను కలిసి ఉపయోగించండి.

ఉదాహరణ

ఉదాహరణ 1

చిత్రాన్ని పరిమితం చేసిన పరిమాణం కావచ్చు:

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

చిత్రాన్ని పరిమితం చేసిన పరిమాణం కావచ్చు:

img {
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 3

ఉపయోగించండి polygon()మరియుclip-path మరియు shape-outside:

img {
  float: left;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

స్వయంగా ప్రయత్నించండి

CSS సంకేతాలు

polygon(fill-rule, length-percentage)
విలువ వివరణ
fill-rule

ఆప్షనల్. పూళ్ళను నిర్దేశించడానికి పూళ్ళను నిర్దేశించండి. ఇది nonzero లేదా evenodd కావచ్చు.

అప్రమేయం కాకుండా నిర్దేశించబడింది.
length-percentage

అవసరమైన. పరిమాణం నిర్దేశించడానికి పాయింట్లను నిర్దేశించండి. ఇది పరిమాణం లేదా శాతం కలిగి ఉండవచ్చు.

ప్రతి పాయింట్ ఒక జంట కోఆర్డినేట్లు ఉంటుంది. 0 0 ఎడమ మేలికి నిర్దేశిస్తుంది, 100% 100% కుడి కుడికి నిర్దేశిస్తుంది.

సాంకేతిక వివరాలు

వెర్షన్: CSS షేప్ మొడ్యూల్ లెవల్ 1

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ ఫంక్షన్ పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ నిర్దేశిస్తుంది.

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
37 79 54 10.1 24

సంబంధిత పేజీలు

参考：clip-path అట్రిబ్యూట్

参考：shape-outside అట్రిబ్యూట్

参考：circle() 函数

参考：ellipse() 函数

参考：inset() ఫంక్షన్