Генератор CSS Clip-Path-а

Овај алат генерише вредност CSS clip-path-а из готовог облика — круга, елипсе, троугла, петоугла, шестоугла, звезде или заобљеног правоугаоника — и приказује исечени облик уживо на пољу за преглед пре него што копирате CSS код. Није потребно ручно рачунати polygon() координате за уобичајене облике.

Šta je ovaj alat?

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 и његове основне функције облика.

Zašto ga koristiti?

Преглед уживо исеца стварно поље за преглед према изабраном облику, тако да видите прави резултат уместо да га замишљате из координата.
Седам готових облика — круг, елипса, троугао, петоугао, шестоугао, звезда и заобљени правоугаоник — покривају велику већину случајева употребе clip-path-а без ручног писања polygon тачака.
Готови облици круга, елипсе и заобљеног правоугаоника укључују клизач за величину/заобљеност како бисте фино подесили облик без уређивања координата.
Даје стандардни clip-path CSS код спреман за лепљење на било који елемент.
Ради у потпуности у вашем прегледачу — ништа што конфигуришете се нигде не отпрема. Бесплатно, без регистрације, ради на мобилним уређајима.

Kako se koristi

Изаберите облик из падајућег менија — круг, елипсу, троугао, петоугао, шестоугао, звезду или заобљени правоугаоник.
За кружни, елиптични облик и заобљени правоугаоник, подесите клизач за величину/заобљеност да фино подесите исецање.
Пратите како се поље за преглед ажурира уживо док мењате облик или клизач.
Копирајте генерисани clip-path CSS код и налепите га на елемент који желите да исечете.
За слику уместо пуне боје, примените исто clip-path својство на <img> елемент или елемент са background-image.

Primer

Unos

Облик: Шестоугао

Rezultat

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() са средњим полупречником, често комбинован са квадратном изворном сликом како се круг не би развукао у елипсу.
Коси раздвајач одељка: прилагођени многоугао (није укључен као готов облик овде) који закошава горњу или доњу ивицу одељка пуне ширине ради нeправоугаоног прекида странице.
Икона оцене звездицама или облик беџа: готов облик звезде, користан као декоративни облик уместо ручно нацртаног SVG-а за једноставне случајеве.
Мрежа слика у облику шестоугла: слике исечене у шестоугао распоређене у распореду саћа, чест образац на страницама портфолија/тима.
Заобљени правоугаоник као лака алтернатива за border-radius када исецање треба и да одсече прелив дечјег садржаја, пошто border-radius сам по себи не исеца децу без додатног overflow:hidden.

Комбиновање са другим CSS алатима

clip-path се често комбинује са CSS градијентом као позадином која се исеца, или са box-shadow примењеном на обухватни елемент (пошто clip-path такође исеца сопствену сенку елемента, сенка на родитељском елементу је уобичајено решење за исечен облик који и даље треба да делује као да лебди).

→ Border Radius Generator · Box Shadow Generator

Često postavljana pitanja

Да ли clip-path утиче на величину распореда елемента?

Не — елемент задржава оригиналну величину кутије и позицију за потребе распореда; clip-path мења само оно што се исцртава. Околни елементи се распоређују као да исецање није примењено, што може да вас изненади ако очекујете да се исечени облик понаша као елемент коме је промењена величина.

Зашто се box-shadow не приказује на мом исеченом облику?

clip-path исеца цео рендер елемента, укључујући и сваку сенку коју баца, тако да се box-shadow елемента исеченог кругом или многоуглом одсеца на граници исецања. Да бисте добили сенку која прати видљиви облик, примените box-shadow на неисечени обухватни елемент око исеченог.

Могу ли да анимирам или прелазим clip-path облик?

Да, али само између две вредности clip-path-а истог типа и са истим бројем тачака — на пример, polygon() са 6 тачака који прелази у други polygon() са 6 тачака. Прелаз између суштински различитих облика (circle() у polygon()) углавном се неће глатко анимирати у свим прегледачима.

Да ли се clip-path може користити на позадинским сликама, а не само на садржају елемента?

clip-path исеца цео елемент — укључујући background-image, background-color, ивице и садржај заједно — а не конкретно позадину. Ако желите да исечете само позадинску слику, а остали садржај да остане неисечен, примените clip-path на посебан елемент који садржи само позадину.

Да ли је clip-path подржан у свим модерним прегледачима?

Да — clip-path са основним функцијама облика (circle, ellipse, inset, polygon) је Baseline widely available у главним прегледачима још од јануара 2020. године, према подацима о компатибилности MDN-а. Генерално је безбедно користити га у продукцији без резервног решења за тренутне верзије прегледача.