איך לעשות משולש CSS: הדרכים הנוחות ביותר

לעתים קרובות דפי האינטרנט המודרניים יפים מכילים גרפיקה מושכת רבה. ביניהם הפשוטה משתמשת צורה גיאומטרית כגון משולש, אשר משמש כדי לעצב ריבוי של אלמנטים. לדוגמה, הם משמשים בתור מצביע לאובייקט בעמוד לאתר המבקר הפנה את תשומת לבו אליו. כמובן, את הפונקציה העיקרית של המשולש - דקורטיווי, כמו בלוקים המכילים אותם, הופכת להיות יותר מודרנית ואטרקטיבית.

לא כולם יודעים איך ליצור כזה דמות דרך סגנון מדורגים גיליונות תוהים כיצד להפוך משולש ב CSS.

יישום בעיצוב אתרים

בשנת משולשי עיצוב אתרים בכל מקום. הם עשויים טיפים, תפריטים, שונה UI אלמנטים. לפעמים הם משמשים ליצירת אינדיקציה תהליך האתחול. ואם קודם לכן אפשר היה להסתדר בלעדיהם, אבל עכשיו זה בלתי אפשרי, ואת המפתחים מחויבים להתאים לדרישות כאלה. אחרי הכל, היום נוצר משולש CSS - חלק חשוב בבניית הקישוריות בין חלקים בממשק ולמזג לתוך ישות אחת.

מעצבי אתרים רבים הם נבוכים כשמדובר הפריסה, העיצוב של אשר לעתים קרובות מאוד משולשת. אחרי הכל, אין מאפיינים שהיו ישירות ליצור צורה גיאומטרית זו. למעשה, ישנם מספר שיטות לעשות זאת.

שיטה של יצירת מסגרת באמצעות

השיטה הראשונה מאפשרת לך ליצור משולש ב- CSS - גבול. הוא משתמש במסגרות. למרות העובדה כי הגבולות שנוצרים באמצעות מאפיין הגבול אינו קשור ישירות המשולש, זה משמש לרוב עבור מטרה זו.

כאשר הגדרת אפס גובה ורוחב של אובייקט, כמו גם את ההתקנה של עבה גבול, אתה יכול לראות את הכיכר, אשר מחולק לארבעה שווים משולש. החוכמה היא שאתה צריך לשמור רק את הנחוץ הגבול, והאחרים להפוך שקוף. ועכשיו, מסתבר משולש נמשך בכיוון הנכון CSS וצבע.

צור זוויות באמצעות תכונות "המסגרת" הוא נוח כי אין צורך לצייר תמונות באמצעות כל עריכה. פרמטרים משולשים ניתן לשנות תמיד בקוד. וזה חוסך מפתחי זמן. על ידי שילוב של שוני רוחב של מסגרת זה קל מספיק כדי לקבל את הדמות. כדי להבין איך זה עובד, אתה יכול פשוט ליצור אלמנט ריק עם גובה אפס רוחב,, ומסגרת מאוד עבה בצבע שונה בכל צד. אז, מה שהופכים את השלושה צדדים של ארבעת המשולשים השקופים הם מסוגים שונים:

• משולש, מחפש שמאל, בצד אשר שווה;
• משולש, מביט ימינה שטוח;
• משולש מוארך, פונה שמאלה;
• משולש זוויתי, אשר נותר זווית נכונה;
• משולש מבטה מופנה כלפי מטה;
• משולש, מסתכל למעלה;
• משולש, להביט ימינה, ומינים רבים נוספים.

שימוש psevdoedementov

בעזרת שיטות אלה, אתה יכול ליצור זוויות בהוראות המוקפצות וטיפים. כדי לצרף באמצעות משולש CSS ליחידה, בעיקר למתכנתים להשתמש כגון א-אחרי פסאודו ולפני. אם אתה משתמש בהם יחד, אפשר לצייר במשולש CSS לסבול משבץ.

על ידי שילוב אותם, המפתחים ליצור מגוון של היורה יפה, החלים רכוש position: relative לאלמנט ההורה. הדבר נעשה על מנת פסאודו לא עזב את מקומותיהם.

פלוס השימוש במסגרת CSS ליצירת משולשים הם:

• עריכה מהירה וקלה של גדלים וצבעים בעזרת תכונות;
• לתמוך בכל הדפדפנים.

חסרונות:

• משום שהיא משתמשת המסגרת, אין אפשרות ליישם הדרגתיים, צללים;
• לפעמים, כאשר המשתמש רואה את הדף של דפדפן פיירפוקס, ערך אלפא לא יפעל, וזה יהיה לעוות את התמונה.

שימוש בתמונות מוכנות

השיטה הבאה של יצירה משולשת - הוא שימוש תמונות בקידוד. המשולש נמשך מראש עורך תמונה והוסב קוד מיוחד עם שירותים מיוחדים.

יתרונה של שיטה זו הוא שאתה יכול לעשות עיצוב יפה מאוד עם צללים, הדרגתי, ואת מסגרת ולאחר מכן רק לקודד כל זה. אבל החיסרון הוא העובדה שלא כולם רהוטה בתוכניות גרפיקה. בנוסף, אם התמונה גדולה מאוד, את שורת הקוד מתקבלת על ידי פשוט עצום. זהו לא נוח עבור היזם.

כסעיף נפרד גרסאות ישנות השימוש שווה של הדפדפנים Internert Explorer. בשינה אותם, השיטה הזו פשוט לא עובדת.

שיטה הפוכה מרובע

דרך אחת היא ליצור אמצעי מרובע CSS ההפוכה. ישנם שני בסיסי ליחידה. אבל יש אנשים שמשתמשים פסאודו.

ראשית, אתה יוצר בכיכר. זה יהיה התוכן של החבר מסתובב. ואז לפרוס אותו על ידי 45 מעלות, כך שהוא נראה כמו יהלום. בא, המשמרת-מעלה ביחידה חיצונית שמוסתרים על ידי הצפת הנכס: נסתר. פתרון זה גם אינו לדפדפנים, ולפעמים התמונה אינה מוצגת לפי הצורך.

תוצאות

אז, ישנן שיטות רבות כדי ליצור משולש. רק שזה לא ללכת לאיבוד בכל מאפייני CSS הללו? הפניה במקרה זה תמיד תעזור. הוא מתאר את כל התכונות של גיליונות סגנון מדורגים.

לאלו שלא רוצים להיכנס תכנות ולהציג את CSS-מדריך, יש באינטרנט עורכי שיוצרים משולשים ישרי זווית גדלים וצבעים. בשנות ה עורך ויזואלי, המשתמש בוחר ומגדיר כל דמות הגדרות. המרה משולש מחולל קוד CSS להציב בחלון נפרד על לטוס. ואז, את הקוד שנוצר מוכנס פשוט לתוך הסגנונות כדי להתאים את העיצוב של הדף.