CSS Clip-Path генераторы

Бұл құрал дайын пішін үлгісінен — шеңбер, эллипс, үшбұрыш, бесбұрыш, алтыбұрыш, жұлдыз немесе дөңгеленген тіктөртбұрыштан — CSS clip-path мәнін жасайды және CSS кодын көшірмес бұрын кесілген пішінді алдын ала қарау терезесінде нақты уақытта көрсетеді. Кең тараған пішіндер үшін polygon() координаттарын қолмен есептеудің қажеті жоқ.

Бұл құрал не істейді?

clip-path — элементтің анықталған аймағынан тыс барлық нәрсені жасыратын, тек ішіндегі пішінді көрінетін етіп қалдыратын CSS қасиеті — элемент қорабының қалған бөлігі орналасуда әлі де бар, ол жай ғана боялмайды. Ол circle(), ellipse(), inset() және polygon() сияқты негізгі пішін функцияларын қабылдайды, соңғысы кез келген түзу шеткі пішінді анықтау үшін x/y координаталар жұптарының еркін тізімін алады.

polygon() координаттары қолмен жазудың ең қиын бөлігі — бесбұрыш, алтыбұрыш немесе жұлдыздың әрқайсысына бірнеше дәл орналастырылған нүкте керек, және бір қатенің өзі бүкіл пішінді бұрмалайды. Бұл құрал сол координаттарды сіз үшін дайын пішін үлгісінен есептеп, тікелей алдын ала қарауды бірден жаңартады және көшіру үшін нақты clip-path CSS кодын береді.

Дереккөз: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — clip-path пен оның негізгі пішін функцияларын анықтайтын спецификациялар.

Оны неге пайдалану керек?

Нақты уақыттағы алдын ала қарау таңдалған пішін бойынша нақты алдын ала қарау терезесін кеседі, сондықтан сіз нәтижені координаттардан елестету орнына нақты түрде көресіз.
Жеті дайын пішін үлгісі — шеңбер, эллипс, үшбұрыш, бесбұрыш, алтыбұрыш, жұлдыз және дөңгеленген тіктөртбұрыш — polygon нүктелерін қолмен жазбай-ақ clip-path қолданылуының көпшілігін қамтиды.
Шеңбер, эллипс және дөңгеленген тіктөртбұрыш үлгілерінде координаттарды өңдемей-ақ пішінді дәл баптауға арналған өлшем/дөңгелектену жүгірткісі бар.
Кез келген элементке қоюға дайын стандартты clip-path CSS кодын шығарады.
Толығымен браузеріңізде жұмыс істейді — сіз конфигурациялаған ештеңе ешқайда жүктелмейді. Тегін, тіркеусіз, мобильді құрылғыларда жұмыс істейді.

Оны қалай пайдалану керек

Ашылмалы мәзірден пішінді таңдаңыз — шеңбер, эллипс, үшбұрыш, бесбұрыш, алтыбұрыш, жұлдыз немесе дөңгеленген тіктөртбұрыш.
Шеңбер, эллипс және дөңгеленген тіктөртбұрыш пішіндері үшін кесуді дәл баптау үшін өлшем/дөңгелектену жүгірткісін реттеңіз.
Пішінді немесе жүгірткіні өзгерткен кезде алдын ала қарау терезесінің нақты уақытта жаңарғанын бақылаңыз.
Жасалған clip-path CSS кодын көшіріп, кесілуін қалайтын элементке қойыңыз.
Біртекті түс орнына сурет үшін сол clip-path қасиетін <img> элементіне немесе background-image бар элементке қолданыңыз.

Мысал

Енгізу

Пішін: Алтыбұрыш

Нәтиже

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Дұрыс алтыбұрыш кесуі, көбінесе төсбелгі стиліндегі профиль суреттеріне немесе функция белгішелеріне қолданылады.

Негізгі пішіндер мен polygon() салыстыруы

Шеңбер, эллипс және inset (дөңгеленген тіктөртбұрыш) — өзіндік қарапайым синтаксисі бар CSS-тегі кірістірілген негізгі пішін функциялары — бір немесе екі радиус, қосымша орталық позиция немесе бұрышты дөңгелектендіру. Үшбұрыш, бесбұрыш, алтыбұрыш және жұлдыз кірістірілген пішіндер емес; олардың барлығы polygon() арқылы, пішіннің контурын сызатын x/y координаталар жұптарының жалпақ тізімі арқылы өрнектеледі. Бұл құрал бұл координаттарды дұрыс (бірдей аралықта орналасқан) көпбұрыштар мен бесбұрышты жұлдыз үшін автоматты түрде есептейді, бұл қолмен дәл орындау қиын бөлігі.

Кең тараған clip-path үлгілері

Дөңгелек аватар немесе төсбелгі: орташа радиустағы circle(), көбінесе шеңбердің эллипске созылмауы үшін шаршы бастапқы суретпен біріктіріледі.
Көлбеу бөлім бөлгіші: толық ені бойынша бөлімнің жоғарғы немесе төменгі шетін қисайтатын, тіктөртбұрышты емес бет үзілісі үшін реттелетін көпбұрыш (мұнда дайын үлгі ретінде енгізілмеген).
Жұлдызды рейтинг белгішесі немесе төсбелгі пішіні: қарапайым жағдайларда қолмен салынған SVG орнына сәндік пішін ретінде пайдалы жұлдыз үлгісі.
Алтыбұрышты сурет торы: ара ұясы орналасуында орналасқан алтыбұрышпен кесілген суреттер — портфолио/команда беттерінде кең тараған үлгі.
border-radius-тың жеңіл балама нұсқасы ретіндегі дөңгеленген тіктөртбұрыш, кесу асып кеткен ішкі мазмұнды да кесуі керек болған кезде, себебі border-radius өзі қосымша overflow:hidden болмаса ішкі элементтерді кеспейді.

Басқа CSS құралдарымен біріктіру

clip-path жиі кесілетін фон ретінде CSS градиентімен немесе орауыш элементке қолданылатын box-shadow-мен біріктіріледі (clip-path элементтің өз көлеңкесін де кесетіндіктен, ата-ана элементіндегі көлеңке — әлі де қалқып тұрғандай көрінуі керек кесілген пішін үшін әдеттегі шешім).

→ Border Radius Generator · Box Shadow Generator

Жиі қойылатын сұрақтар

clip-path элементтің орналасу өлшеміне әсер ете ме?

Жоқ — элемент орналасу мақсатында өзінің бастапқы қорап өлшемі мен позициясын сақтайды; clip-path тек боялатынды ғана өзгертеді. Айналадағы элементтер кесу қолданылмағандай орналастырылады, бұл кесілген пішін өлшемі өзгертілген элемент сияқты әрекет етеді деп күткен жағдайда сізді таңдандыруы мүмкін.

Неге менің кесілген пішінімде box-shadow көрінбейді?

clip-path элементтің бүкіл рендерін, оның ішінде түсіретін кез келген көлеңкесін кеседі, сондықтан шеңбермен немесе көпбұрышпен кесілген элементтің өз box-shadow-ы кесу шекарасында кесіледі. Көрінетін пішінге сәйкес келетін көлеңке алу үшін box-shadow-ды кесілген элементті қоршаған кесілмеген орауыш элементке қолданыңыз.

clip-path пішінін анимациялауға немесе ауыстыруға бола ма?

Иә, бірақ тек бірдей түрдегі және бірдей нүкте санындағы екі clip-path мәні арасында — мысалы, 6 нүктелі бір polygon() тағы бір 6 нүктелі polygon()-ға ауысады. Түбегейлі әртүрлі пішіндер арасындағы ауысу (circle()-дан polygon()-ға) әдетте браузерлерде тегіс анимацияланбайды.

clip-path тек элемент мазмұнында ғана емес, фон суреттерінде де қолданыла ма?

clip-path нақты фонды емес, бүкіл элементті — background-image, background-color, шекаралар мен мазмұнды бірге — кеседі. Егер сіз тек фон суретін кесіп, қалған мазмұнды кесілмеген күйде қалдырғыңыз келсе, clip-path-ты тек фонды ұстайтын бөлек элементке қолданыңыз.

clip-path барлық заманауи браузерлерде қолдау көрсетіле ме?

Иә — негізгі пішін функциялары (circle, ellipse, inset, polygon) бар clip-path MDN-нің үйлесімділік деректері бойынша 2020 жылдың қаңтарынан бастап негізгі браузерлерде Baseline widely available болып табылады. Оны қазіргі браузер нұсқалары үшін қосымша шешімсіз өндірісте пайдалану жалпы қауіпсіз.