Ինչպես ստեղծել CSS clip-path ձևեր տարրերի դիմակավորման համար

Ընտրեք ճանաչված ձևը, անհրաժեշտության դեպքում լրացրեք չափն ու դիրքը, ապա ստացեք CSS clip-path հատվածը։ Դատարկ դաշտերի դեպքում կիրառվում են համապատասխանաբար circle, 50 և center արժեքները։

Ինչի համար է պետք CSS clip-path ձևերի գեներատորը

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

Ձևը ընտրելիս կարևոր է տարբերել երկու մոտեցում։ circle և ellipse ձևերի դեպքում կարող եք տրամադրել չափ և դիրք։ Մյուս ճանաչված ձևերը՝ triangle, hexagon, pentagon, star և diamond, հիմնված են նախապես սահմանված polygon կոորդինատների վրա։ Այս պատճառով դրանք օգտակար են արագ ստանդարտ ուրվագիծ ստանալու համար, սակայն նույն չափի և դիրքի դաշտերը դրանց կոորդինատները չեն վերաձևում։

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

Ինչպես ստանալ և կիրառել CSS clip-path հայտարարություն

1. Բացեք գործիքի մուտքի դաշտերը և որոշեք, թե ինչպիսի ուրվագիծ է պետք ստանալ։ Ձևի դաշտում գրեք ճանաչված անուններից մեկը՝ circle, ellipse, triangle, hexagon, pentagon, star կամ diamond։ Եթե ձևի դաշտը չլրացնեք, կօգտագործվի circle։ Եթե գրեք չճանաչված անուն, այն չի վերածվի նոր կամայական երկրաչափության. այդ արժեքի դեպքում կիրառվում է շրջանաձև երկրաչափությունը։

2. Եթե ընտրել եք circle կամ ellipse, որոշեք չափի արժեքը։ Չափի դաշտը պարտադիր չէ. այն դատարկ թողնելու դեպքում կօգտագործվի 50։ circle-ի դեպքում տրամադրված թիվը տեղադրվում է որպես տոկոսային չափ։ Օրինակ՝ 40 արժեքը արդյունքի մեջ հայտնվում է որպես շրջանագծի չափի տոկոս։ ellipse-ի դեպքում առաջին տոկոսային արժեքը վերցվում է ձեր նշած չափից, իսկ երկրորդը ստացվում է նույն չափը 0.6-ով բազմապատկելով։ Այդ պատճառով էլիպսի երկու առանցքերին վերաբերող տոկոսները նույնը չեն։

3. Նշեք դիրքը, եթե ցանկանում եք, որ շրջանագծի կամ էլիպսի կենտրոնը գտնվի կենտրոնից տարբեր տեղում։ Դաշտը կարող եք թողնել դատարկ, և այդ դեպքում կօգտագործվի center։ Լրացված դիրքը արդյունքի ձևի հայտարարության մեջ դրվում է at բառից հետո։ Այդ արժեքը գրանցելիս պահեք դիրքի արտահայտությունը մեկ ամբողջական մուտք, օրինակ՝ top right, եթե ցանկանում եք նշել վերևի աջ հատվածը։

4. Եթե ընտրել եք triangle, hexagon, pentagon, star կամ diamond, չափի և դիրքի դաշտերը մի օգտագործեք այդ պատրաստի ուրվագծի չափերը փոխելու ակնկալիքով։ Այս ձևերը ստեղծվում են polygon-ային ձևանմուշներով, որոնք ունեն հաստատուն տոկոսային կոորդինատներ։ Հետևաբար ձևի ընտրությունն է որոշում, թե որ պատրաստի կոորդինատների հավաքածուն կմտնի արդյունքի մեջ։

5. Ստեղծեք արդյունքը և դիտեք ստացված CSS հատվածը։ Փնտրեք clip-path հայտարարությունը, ապա տեղադրեք այդ հատվածը այն ընտրիչի ոճերում, որը վերաբերում է դիմակավորվող տարրին։ Էջում ստուգելիս ուշադրություն դարձրեք հենց տվյալ տարրի չափին և դիրքին, քանի որ նույն CSS ձևը կարող է տարբեր տեսք ունենալ տարբեր չափերի տարրերի վրա։ Եթե արդյունքը սպասված չէ, նախ ստուգեք ձևի անունը, ապա՝ չափի և դիրքի մուտքերը։

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

Ստացված արդյունքը պետք է լինի CSS հատված, որը պարունակում է clip-path հայտարարություն և նախատեսված է տարրի տեսանելի հատվածը ընտրված ուրվագծով սահմանափակելու համար։ Արդյունքը գնահատելիս նախ նայեք ձևի անունին, հետո՝ այն պարամետրերին, որոնք տվյալ ձևի համար իրականում օգտագործվում են։

circle ընտրելու դեպքում չափը դառնում է տոկոսային արժեք, իսկ դիրքը հայտնվում է at բառից հետո։ Օրինակ՝ 40 չափն ու top right դիրքը պետք է արտացոլվեն որպես 40 տոկոսային չափ և վերևի աջ դիրք։ ellipse ընտրելու դեպքում առաջին տոկոսը համապատասխանում է նշված չափին, իսկ երկրորդը՝ դրա 0.6 բազմապատիկին։ Այս տարբերությունն է բացատրում էլիպսի ոչ հավասար երկու չափերը։

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

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

Վեբ էջում պատկերի վերևի աջ հատվածում շրջանաձև դիմակ ստանալու համար ընտրում եք circle ձևը, սահմանում եք 40 չափ և top right դիրք։

Պատկերի վերևի աջ հատվածում շրջանաձև դիմակ ստանալու համար ընտրեք circle, չափի դաշտում գրեք 40, դիրքի դաշտում նշեք top right, ապա ստացեք CSS հատվածը։

Գեներացված CSS հատվածում կլինի clip-path հայտարարություն, որտեղ շրջանագծի չափը ներկայացված է 40% արժեքով, իսկ դիրքը դրված է at հատվածից հետո՝ top right դիրքի համար։

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

• Չափի և դիրքի տրամադրված արժեքները գործածվում են circle և ellipse ձևերի համար։ triangle, hexagon, pentagon, star և diamond ձևերը օգտագործում են հաստատուն polygon կոորդինատներ, ուստի այդ դաշտերը չեն վերաձևում դրանց պատրաստի ուրվագիծը։

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

• Չճանաչված ձևի անուն գրելու դեպքում ակնկալվում է, որ կկիրառվի circle երկրաչափությունը, ոչ թե նոր ձև։ Ուղղում՝ մուտքագրեք ճանաչված անուններից մեկը՝ circle, ellipse, triangle, hexagon, pentagon, star կամ diamond, կամ ձևի դաշտը թողեք դատարկ։

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

Ի՞նչ կլինի, եթե ձև չընտրեմ։

Եթե ձևի դաշտը դատարկ թողնեք, կօգտագործվի circle ձևը։ Եթե դաշտում գրեք չճանաչված անուն, նույնպես կիրառվում է շրջանաձև երկրաչափությունը, ոչ թե նոր կամայական ձև։

Ի՞նչ չափ է կիրառվում դատարկ դաշտի դեպքում։

Եթե չափի դաշտը դատարկ թողնեք, կօգտագործվի 50 արժեքը։ circle-ի դեպքում այն արտահայտվում է որպես տոկոսային չափ, իսկ ellipse-ի դեպքում երկրորդ տոկոսը հաշվարկվում է այդ արժեքը 0.6-ով բազմապատկելով։

Կարո՞ղ եմ չափով և դիրքով փոխել բոլոր ձևերը։

Միայն circle և ellipse ձևերի դեպքում են տրամադրված չափն ու դիրքը օգտագործվում ձևի հայտարարության մեջ։ triangle, hexagon, pentagon, star և diamond ձևերը հիմնված են հաստատուն polygon կոորդինատների վրա։