با سلام خدمت وی بی ایرانی های عزیز
عرصه ی طراحی وب روز به روز در حال توسعه است و طراحان وب سعی در استفاده ی حداقل از عکس رو در طراحی وب دارند . از این سو سعی میکنند همه ی عکس ها و ایک.ن ها و ... رو با css یا svg طراحی کنند

اکنون بنده میخواهم آموزش ایجاد 4 شکل هندسی(مثلث، مربع ، دایره، مستطیل) رو با css خالص به شما آموزش دهم که استفاده ی زیادی دارد

1. مربع : مربع که بسیار بسیار ساده است شما یک div رو در یک صفحه ی html می سازید و بعد در css به آن پس زمینه میدهید تنها نکته در ساخت مربع این است که طول عرض یکسان داشته باشد یعنی width , height مساوی داشته باشند

2. مستطیل: مستطیل هم در واقع یک مربع است که طول (height) یا عرض(Width) آن از دیگری بیشتر باشد (کلا خیلی آسونه
)

3. دایره : دایره هم ساده است . برای ساخت یک دایره باید اول یک مربع داشته باشید . مربع را که ایجاد کردید در css به آن
border-radius 50% میدهم . (توجه کنید که border-radius نهایتا 50% می شود و بعد از 50% تغییری در المانت شما ایجاد نمی شود )

4. مثلث : اما مثل ، در مثلث شما باید طول و عرض را 0 قرار دهید و بعد border-top و border-left و border-bottom
را transparent و به مقدار دلخواه قرار دهید (باید هر سه با هم مساوی باشند ) و border-right را در همان مقداری که برای آن ها قرار دادید قرار میدهید با این تفاوت که به این یک رنگ میدهد . اکنون شما یک مثلث به سمت چپ دارید برای ایجاد مثلث به سمت های دیگر باید جای آن ها را با هم عوض کنید

اگر متوجه نشدید لینک زیر را مشاهده کنید . لینک زیر نمایش زنده ای از این 4 شکل هندسی است

http://jsfiddle.net/78j7W/

موفق باشید