چگونه کارهای CSS مثلث: راحت ترین راه

خیلی اوقات صفحات وب مدرن و زیبا شامل بسیاری از گرافیک جذاب. در میان آنها ساده ترین استفاده از چنین شکل هندسی به عنوان یک مثلث است که مورد استفاده برای طراحی یک کثرت از عناصر. به عنوان مثال، آنها به عنوان یک اشاره گر به یک شی در صفحه به بازدید کنندگان سایت استفاده می شود توجه خود را به او تبدیل شده است. البته، تابع اصلی از مثلث - یک تزئینی، به عنوان بلوک های که حاوی آنها، در حال تبدیل شدن مدرن تر و جذاب.

هر کسی می داند که چگونه برای ایجاد چنین رقم از طریق شیوه نامه های آبشاری، و بدانم که چگونه به یک مثلث در CSS.

کاربرد در طراحی سایت های

در مثلث طراحی وب در همه جا. آنها ساخته شده راهنمایی، منوها، عناصر مختلف UI. گاهی اوقات آنها مورد استفاده برای ایجاد یک شاخص از فرایند بوت. و اگر قبل از آن ممکن بدون آنها انجام شد، اما در حال حاضر غیر ممکن است، و توسعه دهندگان موظف به انطباق با چنین مورد نیاز است. در ساخت اتصال بین بخش هایی از رابط بخش مهم و ادغام در یک نهاد واحد - پس از همه، امروز در مثلث CSS ایجاد شده است.

بسیاری از طراحان وب بهت زده که آن را به طرح، طراحی که است که اغلب مثلث می آید. پس از همه، هیچ خواص است که به طور مستقیم این شکل هندسی ایجاد کنید. در واقع، روش های متعدد برای انجام این کار وجود دارد.

روش ایجاد قاب با استفاده از

روش اول اجازه می دهد تا به شما برای ایجاد یک مثلث در CSS - مرز. او با استفاده از فریم. با وجود این واقعیت است که مرزهای که با استفاده از ویژگی border ایجاد می شود به طور مستقیم به مثلث مربوط نیست، آن است که اغلب برای این منظور استفاده می شود.

هنگام تنظیم ارتفاع صفر و عرض از جسم، و همچنین نصب و راه اندازی یک مرز ضخامت، شما می توانید مربع، است که به چهار مثلث مساوی تقسیم را ببینید. ترفند این است که شما نیاز به نگه داشتن تنها مرز ضروری، و دیگران را به شفاف است. و در حال حاضر، آن را تبدیل یک مثلث کشیده شده را در مسیر درست CSS و رنگ.

درست زاویه با استفاده از خواص "قاب" مناسب است، زیرا بدون نیاز به رسم تصاویر با استفاده از هر ویرایش وجود دارد. پارامترهای مثلث همیشه می توانید در کد تغییر کند. و آن را موجب صرفه جویی در زمان توسعه. با ترکیب عرض های مختلف از قاب آن آسان است به اندازه کافی به این رقم است. برای درک اینکه چگونه کار می کند، می توانید به سادگی یک عنصر خالی با عرض صفر، ارتفاع، و قاب بسیار ضخیم به رنگ های مختلف در هر طرف ایجاد کنید. بنابراین، ساخت سه طرف از چهار مثلث شفاف از انواع مختلف هستند:

• مثلث، به دنبال به سمت چپ، دو طرف که با هم برابرند.
• مثلث، به دنبال به سمت چپ و مسطح؛
• مثلث دراز، در معرض به سمت چپ.
• مثلث زاویه دار، که از چپ به زاویه سمت راست.
• مثلث رو به پایین به دنبال.
• مثلث دنبال کردن؛
• مثلث، به دنبال به سمت راست، و بسیاری از گونه های دیگر.

با استفاده از psevdoedementov

با این روش، شما می توانید زاویه در دستورالعمل پاپ آپ و راهنمایی ایجاد کنید. به ضمیمه از طریق مثلث CSS به واحد، عمدتا استفاده از برنامه نویسان مانند یک شبه قبل و بعد از. اگر شما از آنها استفاده هم، ممکن است به منظور جلب در مثلث CSS داشتن سکته مغزی است.

با ترکیب آنها، توسعه دهندگان ایجاد انواع تیرانداز زیبا، استفاده از اموال موقعیت: نسبی به عنصر پدر و مادر. این است که در جهت انجام از کرسی های خود را شبه نمی نقل مکان کرد.

به علاوه استفاده از چارچوب CSS برای ایجاد مثلث:

• ویرایش سریع و آسان اندازه ها و رنگ با کمک از خواص؛
• تمام مرورگرهای پشتیبانی می کنند.

منفی:

• زیرا با استفاده از قاب، وجود دارد هیچ امکان اعمال شیب، سایه؛
• گاهی اوقات، زمانی که کاربر به نظر می رسد در صفحه فایرفاکس مرورگر، آلفا ارزش مه نه کار، و این تحریف تصویر.

با استفاده از تصاویر آماده ساخته شده است

از روش زیر ایجاد مثلث - استفاده از تصاویر کدبندی شده است. مثلث در پیش در یک ویرایشگر تصویر کشیده شده و تبدیل به یک کد خاص با خدمات تخصصی.

مزیت این روش این است که شما می توانید یک طراحی بسیار زیبا با سایه، شیب، و قاب و پس از آن فقط آن را همه را رمزگذاری کنید. اما حرکت نزولی این واقعیت است که هر کس نمی مسلط به برنامه های گرافیکی است. علاوه بر این، اگر تصویر بسیار بزرگ است، خط از کد است به سادگی بسیار زیاد به دست آورد. این ناخوشایند برای توسعه است.

یک آیتم جداگانه به ارزش استفاده از مرورگرهای Internert اکسپلورر نسخه های قدیمی. در آنها، از روش به سادگی کار نمی کند.

روش مربع معکوس

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

اول، شما درست مربع است. این خواهد بود که محتویات عضو دوار. سپس آن را 45 درجه استقرار، به طوری که آن را مانند یک الماس بود. در مرحله بعد، تغییر کردن و یک واحد خارجی توسط سرریز اموال پنهان: پنهان است. این راه حل نیز یک متقابل مرورگر نیست، و گاهی اوقات تصویر نمایش داده نمی شود به عنوان مورد نظر.

نتایج

بنابراین، روش های زیادی برای ایجاد یک مثلث وجود دارد. فقط آن را نمی شود در تمام این خواص CSS دست داده است؟ مرجع در این مورد همیشه کمک خواهد کرد. آن را توصیف تمام ویژگی های شیوه نامه های آبشاری.

برای کسانی که نمی خواهند برای رفتن به برنامه نویسی و مشاهده CSS-راهنمای هستند، سردبیران آنلاین است که تولید مثلث اندازه از سمت راست و رنگ وجود دارد. در ویرایشگر بصری، کاربر را انتخاب و تنظیم همه رقم تنظیمات. تبدیل به کد CSS مثلث ژنراتور در یک پنجره جداگانه در پرواز قرار داده است. سپس، کد تولید شده است که به سادگی به شیوه قرار داده و به تناسب طراحی صفحه استفاده کنید.