|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

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

شماره همراه خود را وارد کنید

ورود و ادامه

ایجاد شکل های مختلف با CSS – سری اول

مربع

 

 
#square {
	width: 100px;
	height: 100px;
	background: #36c;
}

مستطيل

 

 
#rectangle {
	width: 200px;
	height: 100px;
	background: #36c;
}

دايره

 

 
#circle {
	width: 100px;
	height: 100px;
	background: #36c;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

بيضي

 

 
#oval {
	width: 200px;
	height: 100px;
	background: #36c;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
}

مثلث 1

 

 
#triangle-up {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #36c;
}

مثلث 2

 

 
#triangle-down {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #36c;
}

مثلث 3

 

 
#triangle-left {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-right: 100px solid #36c;
	border-bottom: 50px solid transparent;
}

مثلث 4

 

 
#triangle-right {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-left: 100px solid #36c;
	border-bottom: 50px solid transparent;
}

مثلث 5

 

 
#triangle-topleft {
	width: 0;
	height: 0;
	border-top: 100px solid #36c;
	border-right: 100px solid transparent;
}

مثلث 6

 

 
#triangle-topright {
	width: 0;
	height: 0;
	border-top: 100px solid #36c;
	border-left: 100px solid transparent;

}

مثلث 7

 

 
#triangle-bottomleft {
	width: 0;
	height: 0;
	border-bottom: 100px solid #36c;
	border-right: 100px solid transparent;
}

مثلث 8

 

 
#triangle-bottomright {
	width: 0;
	height: 0;
	border-bottom: 100px solid #36c;
	border-left: 100px solid transparent;
}

نظر شما

>

مفاهیم طراحی وب

مقالات و دروس

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

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد