در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش درست کردن مثلث با css

سلام به تک تک دوستان itpro ، توی طراحی وبسایت خیلی جاها ممکنه پیش بیاد که ما بخوایم از مثلث توی طراحیمون استفاده کنیم .ولی توی css هیچ property وجود نداره برای درست کردن مثلث. ما امروز می خوایم یاد بگیریم که چطور در css با خلاقیت مثلث های مختلفی رو درست کنیم. برای شروع هیچی جز یه فایل html نیاز نداریم. دمن یک فولدر می سازم و داخلش یک فایل html قرار میدم .

<!DOCTYPE html>
<head>
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			background-color:gainsboro;
			direction:rtl;
		}
	</style>
</head>
<html>
<body>
<div id="triangle"></div>

</body>
</html>

خوب تا اینجا که کد پیچیده ای نبوده. برای ادامه باید div رو تبدیل به مثلث بکنیم. برای این کار ابندا من یه سری border به div میدم.

div#triangle{
    margin:100px;
    width:0;
    height:0;
    border-top:200px solid #f6f6f6;
    border-right:200px solid yellow;
    border-left:200px solid red;
    border-bottom:200px solid white;
}

توی قسمت بالا من عرض و طول div خودم رو 0 کردن و بعد به اون border هایی با پهنای 200 دادم.

خروجی:

triangle css

همونطور که توی خروجی دیدید به علت این که div من طول و عرض نداشت border ها فضایی برای مستطیل شدن نداشتند و به حالت مثلث هایی با راس مشترک در می امدند.

خب حالا کافیه که من سه تا از اون ها رو بردارم تا دیگری به شکل مثلث دیده بشه. اما برداشتن کامل border های دیگر باعث می شود که border باقی مانده فضا داشته باشد و تبدیل به مستطیل شود. برای همین تنها راه این است که اون ها دیده نشوند. برای این کار من رنگ اونها رو به صورت transparentدر میارم.

div#triangle{
    margin:100px;
    width:0;
    height:0;
    border-top:200px solid transparent;
    border-right:200px solid transparent;
    border-left:200px solid red;
    border-bottom:200px solid transparent;
}

triangle

به همین سادگی !!!

پارسا صفوی - itpro باشید

#درست_کردن_مثلث_با_css #آموزش_css_و_html #طراحی_شکل_مثلث_با_css #ایجاد_اشکال_هندسی_با_css #اشکال_هندسی_در_css #ترفند_های_css_و_html #ایجاد_مثلث_با_css
1 نظر
prober

چه جالب خیلی خوشم اومد ممنون

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....