Ինչպես ստեղծել CSS եռանկյուն CSS Triangle Generator-ով

Ինչի համար է նախատեսված գործիքը

CSS Triangle Generator-ը նախատեսված է սահմանային ոճավորմամբ CSS եռանկյունների համար։ Դուք տրամադրում եք ուղղություն և չափ, իսկ գործիքը վերադարձնում է եռանկյան կառուցվածքը նկարագրող CSS տեքստ։ Այն հարմար է, երբ պետք է արագ պատրաստել սլաք, բացվող ցանկի ցուցիչ, խոսքի պղպջակի պոչ կամ պարզ դեկորատիվ ձև՝ առանց սահմանների երկրաչափությունը ձեռքով կազմելու։

Արդյունքը կարող եք դիտարկել որպես ձեր ոճաթերթում օգտագործվող հատված։ Այն ինքնուրույն չի նկարագրում ամբողջ էջի ձևավորումը. էջում ճիշտ տեսք ստանալու համար պետք է հաշվի առնել այդ տարրի դիրքը, հարակից տարրերը, չափերը և մնացած CSS կանոնները։ Գործիքը հատկապես օգտակար է նախնական տարբերակ ստանալու համար, երբ արդեն գիտեք եռանկյան մոտավոր ուղղությունն ու չափը և ցանկանում եք արագ ստուգել սահմանների դասավորությունը։

Ուղղությունը սահմանում է, թե որ սահմանային պատկերն է ընտրվում, իսկ չափը մասնակցում է պիքսելային արժեքների հաշվարկին։ Գույնի դաշտը պետք չէ դիտարկել որպես վերջնական գույնի վերահսկիչ, քանի որ տրամադրված արժեքը արդյունքի մեջ չի կիրառվում։ Այդ պատճառով օգտագործման նպատակը հիմնականում ձևի կառուցվածքը ստանալն ու այն ձեր ոճաթերթի պահանջներին համապատասխան լրացնելն է։

Քայլ առ քայլ օգտագործում

1. Բացեք գործիքը և գտեք ուղղության ու չափի համար նախատեսված կառավարիչները։ Ուղղության համար ընտրեք աջակցվող արժեքներից մեկը՝ up, down, left, right, top-left, top-right, bottom-left կամ bottom-right։ Այս ութ արժեքները համապատասխանում են վերև, ներքև, ձախ, աջ և չորս անկյունային ուղղություններին։ Եթե ուղղությունը չնշեք, կօգտագործվի վերև ուղղված տարբերակը։

2. Մուտքագրեք ցանկալի չափը։ Չափը պարտադիր չէ. դատարկ թողնելու դեպքում օգտագործվում է 20 արժեքը։ Մուտքագրված թիվը պարզապես չի փոխանցվում որպես մեկ պիքսելային արժեք. դրա վրա կատարվում է հաշվարկ, ներառյալ երկուսի բաժանումը, և ստացված արժեքները տեղադրվում են սահմանների պիքսելային լայնությունների մեջ։ Ուստի փոխված չափից հետո կարդացեք վերադարձված CSS տեքստը և ստուգեք սահմանների թվերը։ Այստեղ նշված չէ չափի թույլատրելի միջակայք կամ դրական լինելու հատուկ ստուգում, այնպես որ մուտքը մի ընտրեք կուրորեն։

3. Գույնի դաշտը կարող եք լրացնել, եթե այն առկա է, սակայն մի սպասեք, որ այդ արժեքը կփոխի ստացված եռանկյան գույնը։ Գործիքը մուտքագրված գույնը չի կիրառում։

4. Ստացեք CSS տեքստը և տեղադրեք այն ձեր ոճաթերթում։ Համոզվեք, որ ձեր էջի այն տարրը, որի համար նախատեսված է հատվածը, օգտագործում է ստացված ընտրիչը։ Այնուհետև էջում ստուգեք դիրքը, ուղղությունը և չափը՝ ձեր իրական դասավորության մեջ։

5. Եթե ձեռքով մուտքագրում եք ուղղություն, օգտագործեք միայն վերը նշված արժեքները։ Չճանաչված արժեքը չի վերածվում սխալի հաղորդագրության. սահմանների լայնությունների պատկերը անցնում է վերև ուղղված տարբերակին, բայց ընտրիչի տեքստում պահպանվում է ձեր գրած ուղղության անվանումը։ Այդպիսի անհամապատասխանությունից խուսափելու համար վերադարձեք աջակցվող արժեքի և նորից ստացեք արդյունքը։

Ինչպես կարդալ արդյունքը

Ստացված հատվածի երկրաչափությունը հասկանալու համար նայեք ոչ միայն ուղղության անվանմանը, այլև սահմանների թվային արժեքներին։ Եռանկյունը կառուցվում է զրոյական լայնությամբ և բարձրությամբ տարրի վրա։ Դրա համար օգտագործվում է պինդ եզրագծի ոճ, իսկ չորս սահմանների լայնությունները գրվում են պիքսելներով։ Այդ լայնությունները հաշվարկվում են չափի մուտքից, ուստի չափը փոխելիս փոխվում է նաև եռանկյան կառուցվածքը։

Երբ ընտրված է աջակցվող ուղղություն, սահմանների լայնությունների դասավորությունը համապատասխանում է այդ ուղղության համար նախատեսված պատկերին։ Օրինակ՝ աջ կամ ձախ ուղղության դեպքում արդյունքը պետք է գնահատել հենց այդ ուղղության համար գեներացված սահմանների հարաբերակցությամբ, ոչ թե միայն ընտրիչի անվամբ։ Անկյունային արժեքների դեպքում նույն մոտեցումը կիրառեք անկյունային դասավորության նկատմամբ։

Գունային արդյունքը պետք է մեկնաբանել առանձին։ Թեև կարող եք գույն մուտքագրել, այդ արժեքը չի ազդում ստեղծված CSS-ի վրա, իսկ արտադրված սահմանների գույները թափանցիկ են։ Եթե էջում տեսանելի գույն է պետք, արդյունքը տեղադրելուց հետո ուսումնասիրեք ստացված CSS-ի սահմանային գունավորման մասը և կատարեք ձեր անհրաժեշտ փոփոխությունները։ Մի վերագրեք այդ փոփոխությունը գործիքին, քանի որ այն տրամադրված գույնը չի կիրառում։

Չճանաչված ուղղության դեպքում ընտրիչի տեքստը և տեսողական երկրաչափությունը կարող են չհամընկնել։ Պահպանված մուտքային անվանումը չի նշանակում, որ գործիքը ստեղծել է այդ անվանմանը համապատասխան սահմանների պատկեր. օգտագործվում է վերև ուղղված պատկերը։ Այդ պատճառով արդյունքը կիրառելուց առաջ ստուգեք թե՛ ընտրիչը, թե՛ սահմանների լայնությունները։

Գործնական օրինակ

Դուք ստեղծում եք բացվող ցանկի աջ ուղղված ցուցիչ և ցանկանում եք ստանալ դրա CSS կառուցվածքը՝ 24 չափի հիման վրա։

Ընտրեք right ուղղությունը, մուտքագրեք 24 չափ, թողեք գույնի դաշտը լրացված կամ փոխեք այն, ապա ստացեք CSS տեքստը և ստուգեք այն ձեր էջի աջ ուղղված ցուցիչի վրա։

Արդյունքը CSS տեքստ է, որտեղ եռանկյունը կառուցվում է զրոյական լայնությամբ և բարձրությամբ տարրի, պինդ եզրագծերի ու պիքսելային սահմանների միջոցով։

Սահմանափակումներ

• Գույնի դաշտը չի փոխում արդյունքի գույնը, չճանաչված ուղղությունը օգտագործում է վերև ուղղված սահմանների պատկերը, իսկ չափի համար այստեղ նշված չէ վավերացման կամ թույլատրելի միջակայքի կանոն։

Հաճախակի սխալներ

• Եթե մուտքագրված գույնը չի երևում, պատճառը այն է, որ գործիքը այդ արժեքը չի կիրառում, իսկ ստացված սահմանների գույները թափանցիկ են։ Ուսումնասիրեք վերադարձված CSS տեքստը և գունավորումը անհրաժեշտ չափով փոխեք ձեր ոճաթերթում։

Հաճախ տրվող հարցեր

Ի՞նչ ուղղություններ կարող եմ ընտրել։

Եթե ուղղությունը դատարկ թողնեք, կօգտագործվի վերև ուղղված տարբերակը։ Կարող եք ընտրել ութ աջակցվող արժեքներից մեկը՝ վերև, ներքև, ձախ, աջ կամ չորս անկյունային ուղղություններից։

Ի՞նչ չափ է օգտագործվում լռելյայն։

Եթե չափը չնշեք, կօգտագործվի 20 արժեքը։ Մուտքագրված չափը մասնակցում է հաշվարկներին, այդ թվում՝ երկուսի բաժանմանը, և արդյունքը տեղադրվում է պիքսելային սահմանների մեջ։

Մուտքագրված գույնը կփոխի՞ եռանկյան գույնը։

Ոչ։ Տրամադրված գույնը չի ազդում ստեղծված CSS-ի վրա, իսկ արտադրված սահմանների գույները թափանցիկ են։ Տեսանելի գունավորում ստանալու համար անհրաժեշտ է արդյունքը ստանալուց հետո առանձին փոփոխել ձեր ոճաթերթի համապատասխան CSS-ը։