آموزش شکل های مختلف تصویر در CSS

با استفاده از CSS، به سادگی می توانیم تصاویر را به صورت دایره ای، بیضی یا چندضلعی دربیاوریم. 

ویژگی clip-path در CSS

ویژگی clip-path به ما امکان می دهد تا یک عنصر را به صورت یک شکل پایه برش بزنیم. 

استفاده از تابع circle() در CSS

تابع circle() یک دایره را با یک شعاع(radius) و یک موقعیت(position) تعریف می کند. از تابع circle() در داخل ویژگی clip-path استفاده می شود. در زیر، با استفاده از شعاع %50 یک تصویر را به صورت دایره برش می زنیم:

img {
  clip-path: circle(50%);
}

ما همچنین می توانیم مرکز دایره را مشخص کنیم. که می تواند طول(length) یا درصد باشد. این مقدار همچنین می تواند برابر با left یا right یا top یا bottom باشد، مقدار پیش فرض، center می باشد. در زیر، یک تصویر را برش می زنیم تا یک دایره با شعاع %50 باشد و مرکز(center) دایره را در سمت راست(right) قرار می دهیم:

img {
  clip-path: circle(50% at right);
}

استفاده از ویژگی shape-outside در CSS

ویژگی shape-outside به ما امکان می دهد تا یک شکل را برای بسته بندی محتوای خطی تعریف کنیم. از تابع circle() نیز همچنین در داخل ویژگی shape-outside استفاده می شود. در زیر، یک تصویر را به صورت یک دایره با شعاع %40 برش می زنیم و shape-outside را به صورت یک دایره با شعاع %45 تنظیم می کنیم(براش شکل دادن به متن):

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

 استفاده از تابع ellipse() در CSS

تابع ellipse() یک بیضی را به با دو شعاع x و y تعریف می کند. از تابع ellipse() در داخل ویژگی clip-path و ویژگی shape-outside استفاده می شود. در زیر، یک تصویر را به صورت یک بیضی با شعاع %50 x و %35 y، برش زده ایم:

img {
  clip-path: ellipse(50% 35%);
}

 ما همچین می توانیم مرکز بیضی را مشخص کنیم. که می تواند یک مقدارِ طول یا یک درصد باشد. این مقدار همچنین می تواند یک کلمه مانند left یا right یا top یا bottom باشد. مقدار پیش فرض آن center است. در زیر یک تصویر به صورت یک بیضی با 50 درصد x و 35 درصد y مشخص شده است و موقعیت مرکز بیضی در سمت راست قرار گرفته است:

img {
  clip-path: ellipse(50% 35% at right);
}

استفاده از ویژگی shape-outside و ellipse() در CSS

در اینجا، یک تصویر را به صورت بیضی با شعاع 40 درصد x و 50 درصد y برش می زنیم و ویژگی shape-outside را با شعاع 45 درصد x و 50 درصد y تنظیم می کنیم(تا متن را شکل دهیم):

img {
  float: left;
  clip-path: ellipse(40% 50%);
  shape-outside: ellipse(45% 50%);
}

استفاده از تابع polygon() در CSS

تابع polygon() یک چندضلعی را تعریف می کند. تابع polygon() حاوی نقاطی است که یک چندضلعی را مشخص می کنند. که می تواند یک طول یا یک درصد باشد. هر نقطه یک جفت مختصات x و y می باشد. مختصات  0 0 گوشه ی بالا و سمت چپ را مشخص می کند و %100 %100 ، گوشه ی پایین و سمت راست را مشخص می کند.

 از تابع polygon() در داخل ویژگی clip-path و ویژگی shape-outside استفاده می شود. در زیر، یک تصویر را به صورت یک چندضلعی برش زده ایم:

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