آموزش ساخت مثلث با CSS به زبان ساده
چگونه با CSS یک مثلث طراحی کنیم؟ توی طراحی وبسایت خیلی جاها ممکنه پیش بیاد که ما بخوایم از مثلث توی طراحیمون استفاده کنیم .ولی توی 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 دادم.خروجی:
همونطور که توی خروجی دیدید به علت این که 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;
}
به همین سادگی !!!