<basic-shape>

<basic-shape> همانطور که از نامش پیداست یک شکل پایه و ساده است که بوسیله یکی از توابع شکل تعریف می شود و سپس می توان آن شکل را به عنوان یک مقدار برای یکی از ویژگی های clip-path و یا shape-outside تنظیم کرد.

این اشکال فقط مخصوص دو ویژگی که در بالا بیان شد نیستند در آینده امکان اینکه ویژگی های دیگری بوجود بیایند و مقدار شکل بپذیرند وجود دارد.

برای تعریف این اشکال می توان از همه واحدهای اندازه گیری استفاده کرد. توجه داشته باشید که اگر از واحد درصد استفاده کنید مقدار مورد نظر نسبت به عرض یا ارتفاع عنصر تعیین خواهد شد که در ادامه برای هر یک از توابع توضیح داده خواهد شد. همچنین اشکال معمولا نیاز به مختصات دهی دارند که این مختصات مانند مختصات عناصر از گوشه بالا سمت چپ آغاز می شود و مقدار دهی آن شبیه به ویژگی های دیگر در سی اس اس عمل می کند.

inset()

با استفاده از تابع inset می توان یک مستطیل داخلی بوجود آورد. سینتکس این تابع به این صورت است:

inset() = inset( [offset]{1,4} [round ]? )

این تابع می تواند یک، دو، سه و یا چهار مقدار بپذیرد و هر یک از این مقادیر می تواند از واحدهای مختلف اندازه دهی استفاده کنند.

اگر یک مقدار تعیین شود، آن مقدار برای هر چهار سمت مستطیل تعیین می شود:

inset(10px)

مثال بالا به این معناست که لبه های مستطیل از لبه بالا، راست، پایین و چپ عنصر 10 پیکسل فاصله خواهد داشت و به این صورت مستطیل بوجود خواهد آمد.

inset(10% 20%); 

از لبه بالا و پایین 10 درصد و از لبه های راست و چپ 20 درصد فاصله خواهد داشت.

inset(15px 20px 30px); 

این مستطیل از لبه بالا 15 پیکسل، از سمت چپ و راست 20 پیکسل و از پایین 30 پیکسل فاصله خواهد داشت.

inset(15px 20px 30px 2em); 

این مستطیل از لبه بالایی 15 پیکسل، از لبه راست 20 پیکسل، از لبه پایین 30 پیکسل و لبه سمت چپ 2em فاصله دارد.

زمانی که از واحد درصد استفاده می کنیم، اگر لبه های بالا و پایین را با درصد تعیین کنیم این درصد نسبت به ارتفاع عنصر و اگر لبه های چپ و راست را مقدار دهی کنیم این درصد نسبت به عرض عنصر محاسبه خواهد شد.

حال اگر بخواهیم گوشه های مستطیل گرد باشند کافی است از کلمه کلیدی round استفاده کنیم و مقادیر گرد شدن گوشه های مختلف را تعیین کنیم. توجه داشته باشید که مقدار دهی برای round کاملا شبیه به border-radius است و سینتکس کاملا یکی می باشد.

به عنوان مثال می توان با یک مقدار شعاع همه گوشه ها را تعیین کرد:

inset(15px 20px 30px 2em round 5px); 

یا اینکه می توان بطور خاص تری این کار را انجام داد:

inset(10% 20% round 2em 1em 4em / 0.5em 3em );

برای بررسی سینتکس border-radius به مطلب مربوط به آن مراجعه کنید.

circle()

با استفاده از تابع circle می توان یک دایره تعریف کرد و سینتکس این تابع بصورت زیر است:

circle() = circle( []? [at ]? )

مقدار اول مربوط به شعاع دایره و مقدار دوم مربوط به مکان و مختصات مرکز دایره می باشد. البته هر دوی این مقادیر اختیاری هستند و می توان هیچ مقداری به این تابع تخصیص نداد.

سینتکس مختصات مرکز دایره یعنی مقدار دوم این تابع کاملا یکسان با background-position می باشد. یعنی تمامی مقادیر و کلمات کلیدی این ویژگی می توانند در این تابع نیز مورد استفاده قرار بگیرند و قبل از این مقادیر کلمه at می آید:

circle(100px at left bottom);
circle(100px at center);
circle(100px at 10% 30%);

برای تعیین مقدار شعاع می توان از مقادیر طولی و درصد استفاده کرد که درصد نسبت به عرض و ارتفاع استفاده شده تعیین می شود، مقادیر منفی معتبر نمی باشند.

بعلاوه دو مقدار کلیدی وجود دارند که می توانند مورد استفاده قرار بگیرند:

closest-side: این کلمه کلیدی مقدار پیشفرض شعاع است یعنی در صورت عدم تعیین شعاع این کلمه کلیدی تعیین کننده شعاع خواهد بود که بدین معنی است که فاصله مرکز دایره تا نزدیک ترین لبه عنصر را به عنوان شعاع دایره تعیین می کند.

furthest-side: این کلمه کلیدی فاصله بین مرکز دایره تا دورترین لبه عنصر را به عنوان شعاع دایره در نظر می گیرد.

تصویر زیر این دو کلمه کلیدی را به تصویر می کشد:

 

 

با این تفاسیر موارد زیر معتبر می باشند:

/* مرکز دایره مرکز عنصر و شعاع آن به اندازه فاصله مرکز دایره تا نزدیکترین لبه عنصر خواهد بود */
circle();

circle(100px at 30% 50%);

circle(farthest-side at 25% 25%);

circle(10em at 500px 300px);

ellipse()

با استفاده از تابع ellipse می توان بیضی تعریف کرد و سینتکس این تابع به شرح زیر است:

ellipse() = ellipse( [{2}]? [at ]? )

سینتکس این تابع کاملا مشابه به circle است با این تفاوت که بیضی دو مقدار برای شعاع می پذیرد. یک مقدار برای شعاع راستای محور X و مقدار دوم برای شعاع راستای محور Y.

اگر از درصد به عنوان واحد برای مقادیر شعاع استفاده شود، برای شعاع x درصد نسبت به عرض و برای شعاع y نسبت به ارتفاع عنصر مورد نظر محاسبه می شود.

در نتیجه موارد زیر برای تعریف یک بیضی معتبر می باشند:

ellipse(); 

ellipse(100px 50px at 30% 50%); 

ellipse(farthest-side closest-side at 25% 25%); 

ellipse(10em 10em at 500px 300px); 

polygon()

با استفاده از تابع polygon می توان چندضلعی تعریف کرد و سینتکس این تابع به قرار زیر است:

polygon() = polygon( [,]? [ ]# )

این تابع با استفاده از تعیین نقاط مختلف، چندضلعی های مورد نظر ما را بوجود می آورد، در هر جفت اعداد، عدد اول مختصات x نقطه و عدد دوم مختصات y نقطه مورد نظر را مشخص می کند.

به عنوان نمونه می توان یک مثلث بصورت زیر برای یک عنصر تعریف کرد:

polygon(50% 0, 100% 100%, 0% 100%);

علاوه بر مختصات نقطه ها پارامتر دیگری که این تابع می پذیرد مربوط به زمانی است که یک چندضلعی خود را قطع کند. در این صورت نحوه رسم و ترسیم نهایی شکل وابسته به پارامتر fill-rule است که کلمات کلیدی nonzero و evenodd را می پذیرد. برای بررسی مفهموم این پارامتر و مقادیر آن به همین ویژگی یعنی fill-rule در بخش SVG مراجعه کنید.

با توجه به این موارد مثال های زیر برای تعریف یک چندضلعی معتبر می باشند:

polygon(0 0, 100% 100%, 0 100%);

polygon(0 0, 100% 100%, 0 100%);

polygon(50px 0px, 100px 100px, 0px 100px);

polygon(170.67px 291.00px, 126.23px 347.56px, 139.79px 417.11px, 208.92px 466.22px, 302.50px 482.97px, 343.67px 474.47px, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, 336.50px 235.26px, 299.67px 196.53px, 259.33px 209.53px, 217.00px 254.76px);

polygon(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, ...);