آموزش ساخت مثلث در CSS

ساعت : ۱۷:۱۵

تاریخ : ۱۹ آذر ۱۳۹۷

چطور به کمک CSS مثلث طراحی کنیم ؟

برای طراحی مثلث در CSS چند روش وجود داره که به بررسی آنها می پردازیم :

۱- طراحی مثلث با CSS به کمک سایت مثلث ساز !

در این روش شما می تونید از سایت زیر کمک بگیرید و هر هر مثلثی که دوست دارید رو با هر سایز و یا رنگ دلخواهتون طراحی کنید :

سایت مثلث ساز

عکس زیر فضای کاربری سایت بالاست که بهتون آموزش میدیم چطور به کمک سایت بالا در CSS مثلث طراحی کنید

طراحی مثلث در CSS
  • قسمت Direction :

    از طریق این قسمت می تونید جهت مثلث رو مشخص کنید

  • قسمت type :

    از طریق این قسمت می تونید نوع مثلث رو مشخص کنید که چجوری باشه ؛ مثلا قائم الزاویه باشه یا متساوی الساقین باشه یا …

  • قسمت size:

    به کمک این قسمت هم می تونید سایز ضلع ها و قاعده و … رو مشخص کنید

  • قسمت color:

    این قسمت هم که مشخصه برای تعیین رنگ مثلث استفاده میشه

  • قسمت CSS:

    این قسمت هم می تونیم کدهای CSS مثلث مون رو کپی کنیم و به کدهای سی اس اس تگ دلخواه مون اضافه کنیم.

۲- طراحی مثلث با CSS !

برای شروع باید یک مربع درست کنیم و از هر چهار طرف بهش border بدیم. پهنای border ها باید یکی باشه اما رنگهاشون رو بهتره تغییر بدیم تا راحت تر عملکرد این روش رو درک کنیم.

کدهای CSS : #tringle_csspark {
width:300px;
height:300px;
border-left: 100px solid #fae013;
border-right: 100px solid #00a651;
border-bottom: 100px solid #00aeef;
border-top: 100px solid #c7254e;
}
کدهای HTML : <div id="tringle_csspark"> </div>

خب حالا باید ارتفاع و پهنای مربع ایجاد شده را انقدر کم کنیم تا شکل زیر حاصل بشه. برای این کار باید عرض و ارتفاع مربع را ۰ در نظر بگیریم.

کدهای CSS : #tringle_csspark {
width:0;
height:0;
border-left: 100px solid #fae013;
border-right: 100px solid #00a651;
border-bottom: 100px solid #00aeef;
border-top: 100px solid #c7254e;
}

حالا هر کدوم از مثلث ها رو خواستید نگهدارید بقیه رو transparent کنید. مثلا فرض کنیم شما مثلث سبز رنگ را لازم دارید؛ برای اینکار کافیه کدهارو به کدهای مقابل تغییر بدید!

کدهای CSS : #tringle_csspark {
width:0;
height:0;
border-left:100px solid transparent;
border-right:100px solid #00a651;
border-bottom:100px solid transparent;
border-top:100px solid transparent;
}



  • آموزش ساخت مثلث در CSS
    نام نویسنده : امیرمسعود طالاری
  • آموزش ساخت مثلث در CSS
    نام نویسنده : رضا ابولحسن زاده
  • آموزش ساخت مثلث در CSS
    نام نویسنده : رضا ابولحسن زاده
  • آموزش ساخت مثلث در CSS
    نام نویسنده : رضا ابولحسن زاده

درباره نویسنده : برنامه نویس وب و کارشناسی ارشد رشته نرم افزار

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *