ایجاد شکل های مختلف با 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;
}

نظر شما

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

PNG یا GIF؟ نکته های حیاتی برای انتخاب روش یادگیری بهتر CSS چگونه دکمه Like فیس بوک را روی وب سایت نصب کنیم؟ ربات وب سایت چیست؟ رنگ بندی وب سایت را چگونه انتخاب کنیم؟ چگونه یک منوی زیبای افقی با CSS3 بسازیم؟ ساخت دکمه حبابی متحرک ایجاد جعبه تصاویر زیبا با CSS3 ایجاد فرم تماس زیبا با HTML5 و CSS3 ساخت پنل افقی شناور با CSS انتخاب فرمت مناسب برای تصاویر در وب سایت ایجاد دکمه مثلثی با سایه توسط CSS فونت ها چگونه می توانند وب سایت شما را تحت تاثیر قرار دهند؟ ساخت یک منوی عمودی فوق العاده زیبا ساخت جدول قیمت گذاری با css3 ساخت منوی کشویی با جعبه جستجو در CSS و HTML تبدیل template انگلیسی به template فارسی | آموزش css 4 نکته برای ساده کردن طراحی صفحات وب پلاگین اختصاصی وب مهراز (webmehraz dancing word) ویژگی های جدید در CSS4 ایجاد شکل های مختلف با CSS – سری اول ایجاد شکل های مختلف با CSS – سری دوم ساخت منو زیبا و کارآمد به همراه TAB سازگاری طراحی واکنشی وب با Cross-browser بدترین طراحی های وب که باید از آنها دوری کرد بهینه سازی طراحی با استفاده از ترازبندی مناسب آموزش کاربردی طراحی وب (درس 1) طراحی واکنشی (Responsive) وب و چگونگی انجام آن – بخش اول طراحی واکنشی (Responsive) وب و چگونگی انجام آن – بخش دوم طراحی واکنشی (Responsive) وب و چگونگی انجام آن – بخش سوم 6 قانون اساسی در سال 2016 برای بهینه سازی وب سایت SEO

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز