{"id":6424,"date":"2026-06-06T17:00:44","date_gmt":"2026-06-06T13:30:44","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=6424"},"modified":"2026-06-06T17:00:44","modified_gmt":"2026-06-06T13:30:44","slug":"%d8%a2%d8%b4%d9%86%d8%a7%db%8c%db%8c-%d8%a8%d8%a7-%d8%a8%d8%b1%d8%b4-%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-%d8%a8%d8%a7-clip-path-%d8%af%d8%b1-css","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/%d8%a2%d8%b4%d9%86%d8%a7%db%8c%db%8c-%d8%a8%d8%a7-%d8%a8%d8%b1%d8%b4-%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-%d8%a8%d8%a7-clip-path-%d8%af%d8%b1-css\/","title":{"rendered":"\u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 \u0628\u0631\u0634 \u0639\u0646\u0627\u0635\u0631 \u0628\u0627 clip-path \u062f\u0631 CSS"},"content":{"rendered":"<h2 data-section-id=\"43f4r3\" data-start=\"43\" data-end=\"51\">\u0645\u0642\u062f\u0645\u0647<\/h2>\n<p data-start=\"53\" data-end=\"199\">\u0648\u06cc\u0698\u06af\u06cc <code data-start=\"59\" data-end=\"70\">clip-path<\/code> \u06cc\u06a9\u06cc \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u062c\u0630\u0627\u0628 CSS \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0641\u0642\u0637 \u0628\u062e\u0634\u06cc \u0627\u0632 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f \u0648 \u0628\u0642\u06cc\u0647 \u0642\u0633\u0645\u062a\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0634 \u0628\u0632\u0646\u06cc\u062f (Clip \u06a9\u0646\u06cc\u062f).<\/p>\n<p data-start=\"201\" data-end=\"242\">\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0648\u06cc \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<ul data-start=\"244\" data-end=\"286\">\n<li data-section-id=\"tvx3tc\" data-start=\"244\" data-end=\"261\">\u062a\u0635\u0627\u0648\u06cc\u0631 (Images)<\/li>\n<li data-section-id=\"qmaeq1\" data-start=\"262\" data-end=\"274\">\u0639\u0646\u0627\u0635\u0631 HTML<\/li>\n<li data-section-id=\"oheaeu\" data-start=\"275\" data-end=\"286\">\u0639\u0646\u0627\u0635\u0631 SVG<\/li>\n<\/ul>\n<p data-start=\"288\" data-end=\"471\">\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code data-start=\"302\" data-end=\"313\">clip-path<\/code> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0634\u06a9\u0627\u0644 \u0645\u062e\u062a\u0644\u0641\u06cc \u0645\u0627\u0646\u0646\u062f \u062f\u0627\u06cc\u0631\u0647\u060c \u0628\u06cc\u0636\u06cc\u060c \u0645\u062b\u0644\u062b\u060c \u0633\u062a\u0627\u0631\u0647 \u0648 \u062d\u062a\u06cc \u0627\u0634\u06a9\u0627\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc SVG \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\u060c \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u062a\u0635\u0648\u06cc\u0631 \u062f\u0631 \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u0647\u0627\u06cc \u06af\u0631\u0627\u0641\u06cc\u06a9\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n<hr data-start=\"473\" data-end=\"476\" \/>\n<h1 data-section-id=\"1b1xmsb\" data-start=\"478\" data-end=\"509\">\u0627\u06cc\u062c\u0627\u062f \u0627\u0634\u06a9\u0627\u0644 \u067e\u0627\u06cc\u0647 \u0628\u0627 clip-path<\/h1>\n<p data-start=\"511\" data-end=\"572\">CSS \u0686\u0646\u062f \u0634\u06a9\u0644 \u0622\u0645\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc <code data-start=\"534\" data-end=\"545\">clip-path<\/code> \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0634\u0645\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f:<\/p>\n<ul data-start=\"574\" data-end=\"626\">\n<li data-section-id=\"nto0w5\" data-start=\"574\" data-end=\"587\"><code data-start=\"576\" data-end=\"587\">polygon()<\/code><\/li>\n<li data-section-id=\"1bhagsb\" data-start=\"588\" data-end=\"600\"><code data-start=\"590\" data-end=\"600\">circle()<\/code><\/li>\n<li data-section-id=\"tjm6jn\" data-start=\"601\" data-end=\"614\"><code data-start=\"603\" data-end=\"614\">ellipse()<\/code><\/li>\n<li data-section-id=\"v7dkmk\" data-start=\"615\" data-end=\"626\"><code data-start=\"617\" data-end=\"626\">inset()<\/code><\/li>\n<\/ul>\n<hr data-start=\"628\" data-end=\"631\" \/>\n<h1 data-section-id=\"1afw71r\" data-start=\"633\" data-end=\"653\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Polygon<\/h1>\n<p data-start=\"655\" data-end=\"698\">\u062a\u0627\u0628\u0639 <code data-start=\"660\" data-end=\"671\">polygon()<\/code> \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631\u062a\u0631\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647 \u0627\u0633\u062a.<\/p>\n<p data-start=\"700\" data-end=\"752\">\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0646\u0642\u0627\u0637 \u0634\u06a9\u0644 \u0631\u0627 \u0628\u0627 \u0645\u062e\u062a\u0635\u0627\u062a X \u0648 Y \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"754\" data-end=\"765\">\u0633\u0627\u062e\u062a\u0627\u0631 \u06a9\u0644\u06cc:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">clip-path<\/span>: <span class=\"\u037cl\">polygon<\/span>(<span class=\"\u037co\">x1<\/span> <span class=\"\u037co\">y1<\/span>, <span class=\"\u037co\">x2<\/span> <span class=\"\u037co\">y2<\/span>, <span class=\"\u037co\">x3<\/span> <span class=\"\u037co\">y3<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"820\" data-end=\"837\">\u0645\u062e\u062a\u0635\u0627\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f:<\/p>\n<ul data-start=\"839\" data-end=\"884\">\n<li data-section-id=\"17mfi14\" data-start=\"839\" data-end=\"849\">\u062f\u0631\u0635\u062f (%)<\/li>\n<li data-section-id=\"1vj6ix9\" data-start=\"850\" data-end=\"862\">\u067e\u06cc\u06a9\u0633\u0644 (px)<\/li>\n<li data-section-id=\"1pz2na\" data-start=\"863\" data-end=\"884\">\u06cc\u0627 \u0647\u0631 \u0648\u0627\u062d\u062f CSS \u062f\u06cc\u06af\u0631<\/li>\n<\/ul>\n<p data-start=\"886\" data-end=\"892\">\u0628\u0627\u0634\u0646\u062f.<\/p>\n<hr data-start=\"894\" data-end=\"897\" \/>\n<h2 data-section-id=\"15q2a7o\" data-start=\"899\" data-end=\"911\">\u0633\u0627\u062e\u062a \u0645\u062b\u0644\u062b<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">polygon1<\/span> {\r\n  -webkit-clip-path: <span class=\"\u037cg\">polygon<\/span>(\r\n    <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span>\r\n  );\r\n\r\n  clip-path: <span class=\"\u037cg\">polygon<\/span>(\r\n    <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span>\r\n  );\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"1080\" data-end=\"1086\">\u0646\u062a\u06cc\u062c\u0647:<\/p>\n<p data-start=\"1088\" data-end=\"1127\">\ud83d\udd3a \u062a\u0635\u0648\u06cc\u0631 \u0628\u0647 \u0634\u06a9\u0644 \u0645\u062b\u0644\u062b \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<hr data-start=\"1129\" data-end=\"1132\" \/>\n<h2 data-section-id=\"r4zxf8\" data-start=\"1134\" data-end=\"1147\">\u0633\u0627\u062e\u062a \u0634\u06a9\u0644 X<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">polygon2<\/span> {\r\n  -webkit-clip-path: <span class=\"\u037cg\">polygon<\/span>(\r\n    <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">30<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">80<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">70<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">80<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">80<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">70<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">80<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">30<\/span><span class=\"\u037cg\">%<\/span>\r\n  );\r\n\r\n  clip-path: <span class=\"\u037cg\">polygon<\/span>(\r\n    <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">30<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">80<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">70<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">80<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">80<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">70<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">80<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">30<\/span><span class=\"\u037cg\">%<\/span>\r\n  );\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"1548\" data-end=\"1554\">\u0646\u062a\u06cc\u062c\u0647:<\/p>\n<p data-start=\"1556\" data-end=\"1587\">\u2716 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0647 \u0634\u06a9\u0644 \u062d\u0631\u0641 X \u062f\u0631 \u0645\u06cc\u200c\u0622\u06cc\u062f.<\/p>\n<hr data-start=\"1589\" data-end=\"1592\" \/>\n<h2 data-section-id=\"t0uo9p\" data-start=\"1594\" data-end=\"1607\">\u0633\u0627\u062e\u062a \u0633\u062a\u0627\u0631\u0647<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">polygon3<\/span> {\r\n  -webkit-clip-path: <span class=\"\u037cg\">polygon<\/span>(\r\n    <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">61<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">35<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">98<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">35<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">68<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">57<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">79<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">91<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">70<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">21<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">91<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">32<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">57<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">2<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">35<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">39<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">35<\/span><span class=\"\u037cg\">%<\/span>\r\n  );\r\n\r\n  clip-path: <span class=\"\u037cg\">polygon<\/span>(\r\n    <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">61<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">35<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">98<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">35<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">68<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">57<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">79<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">91<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">70<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">21<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">91<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">32<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">57<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">2<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">35<\/span><span class=\"\u037cg\">%<\/span>,\r\n    <span class=\"\u037cj\">39<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">35<\/span><span class=\"\u037cg\">%<\/span>\r\n  );\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"1952\" data-end=\"1958\">\u0646\u062a\u06cc\u062c\u0647:<\/p>\n<p data-start=\"1960\" data-end=\"1999\">\u2b50 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0647 \u0634\u06a9\u0644 \u0633\u062a\u0627\u0631\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<hr data-start=\"2001\" data-end=\"2004\" \/>\n<h1 data-section-id=\"13j6bg1\" data-start=\"2006\" data-end=\"2025\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Circle<\/h1>\n<p data-start=\"2027\" data-end=\"2034\">\u0633\u0627\u062e\u062a\u0627\u0631:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037cl\">circle<\/span>(<span class=\"\u037co\">radius<\/span> <span class=\"\u037co\">at<\/span> <span class=\"\u037co\">x<\/span> <span class=\"\u037co\">y<\/span>)<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2070\" data-end=\"2128\">\u0627\u06af\u0631 \u0645\u0648\u0642\u0639\u06cc\u062a \u0645\u0634\u062e\u0635 \u0646\u0634\u0648\u062f\u060c \u0645\u0631\u06a9\u0632 \u062f\u0627\u06cc\u0631\u0647 \u062f\u0631 \u0648\u0633\u0637 \u0639\u0646\u0635\u0631 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f.<\/p>\n<hr data-start=\"2130\" data-end=\"2133\" \/>\n<h2 data-section-id=\"x1mx7\" data-start=\"2135\" data-end=\"2148\">\u062f\u0627\u06cc\u0631\u0647 \u0633\u0627\u062f\u0647<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">circle<\/span> {\r\n  -webkit-clip-path: <span class=\"\u037cg\">circle<\/span>(<span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span>);\r\n  clip-path: <span class=\"\u037cg\">circle<\/span>(<span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span>);\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"2234\" data-end=\"2237\" \/>\n<h2 data-section-id=\"67542c\" data-start=\"2239\" data-end=\"2264\">\u062f\u0627\u06cc\u0631\u0647 \u0628\u0627 \u0645\u0648\u0642\u0639\u06cc\u062a \u0633\u0641\u0627\u0631\u0634\u06cc<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">circle2<\/span> {\r\n  -webkit-clip-path: <span class=\"\u037cg\">circle<\/span>(<span class=\"\u037cj\">70<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">at<\/span> <span class=\"\u037cj\">70<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span>);\r\n  clip-path: <span class=\"\u037cg\">circle<\/span>(<span class=\"\u037cj\">70<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">at<\/span> <span class=\"\u037cj\">70<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span>);\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2373\" data-end=\"2385\">\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644:<\/p>\n<ul data-start=\"2387\" data-end=\"2435\">\n<li data-section-id=\"e2w217\" data-start=\"2387\" data-end=\"2399\">\u0634\u0639\u0627\u0639 = 70\u066a<\/li>\n<li data-section-id=\"iqvv6i\" data-start=\"2400\" data-end=\"2435\">\u0645\u0631\u06a9\u0632 \u062f\u0627\u06cc\u0631\u0647 = 70\u066a \u0627\u0641\u0642\u06cc \u0648 20\u066a \u0639\u0645\u0648\u062f\u06cc<\/li>\n<\/ul>\n<hr data-start=\"2437\" data-end=\"2440\" \/>\n<h1 data-section-id=\"lir8qx\" data-start=\"2442\" data-end=\"2462\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Ellipse<\/h1>\n<p data-start=\"2464\" data-end=\"2471\">\u0633\u0627\u062e\u062a\u0627\u0631:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037cl\">ellipse<\/span>(<span class=\"\u037co\">radiusX<\/span> <span class=\"\u037co\">radiusY<\/span> <span class=\"\u037co\">at<\/span> <span class=\"\u037co\">x<\/span> <span class=\"\u037co\">y<\/span>)<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"2517\" data-end=\"2520\" \/>\n<h2 data-section-id=\"1ywom9z\" data-start=\"2522\" data-end=\"2534\">\u0628\u06cc\u0636\u06cc \u0633\u0627\u062f\u0647<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">ellipse<\/span> {\r\n  -webkit-clip-path: <span class=\"\u037cg\">ellipse<\/span>(<span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">35<\/span><span class=\"\u037cg\">%<\/span>);\r\n  clip-path: <span class=\"\u037cg\">ellipse<\/span>(<span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">35<\/span><span class=\"\u037cg\">%<\/span>);\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"2631\" data-end=\"2634\" \/>\n<h2 data-section-id=\"1lya9nc\" data-start=\"2636\" data-end=\"2660\">\u0628\u06cc\u0636\u06cc \u0628\u0627 \u0645\u0648\u0642\u0639\u06cc\u062a \u0633\u0641\u0627\u0631\u0634\u06cc<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">ellipse2<\/span> {\r\n  -webkit-clip-path: <span class=\"\u037cg\">ellipse<\/span>(\r\n    <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">65<\/span><span class=\"\u037cg\">%<\/span>\r\n    <span class=\"\u037cj\">at<\/span> <span class=\"\u037cj\">70<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span>\r\n  );\r\n\r\n  clip-path: <span class=\"\u037cg\">ellipse<\/span>(\r\n    <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">65<\/span><span class=\"\u037cg\">%<\/span>\r\n    <span class=\"\u037cj\">at<\/span> <span class=\"\u037cj\">70<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span>\r\n  );\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"2805\" data-end=\"2808\" \/>\n<h1 data-section-id=\"c8023q\" data-start=\"2810\" data-end=\"2828\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Inset<\/h1>\n<p data-start=\"2830\" data-end=\"2909\">\u062a\u0627\u0628\u0639 <code data-start=\"2835\" data-end=\"2844\">inset()<\/code> \u06cc\u06a9 \u0645\u0633\u062a\u0637\u06cc\u0644 \u062f\u0627\u062e\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0647\u0631 \u0686\u06cc\u0632\u06cc \u062e\u0627\u0631\u062c \u0627\u0632 \u0622\u0646 \u0631\u0627 \u062d\u0630\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p data-start=\"2911\" data-end=\"2959\">\u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0631\u0627\u06cc \u06a9\u0631\u0627\u067e \u06a9\u0631\u062f\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.<\/p>\n<hr data-start=\"2961\" data-end=\"2964\" \/>\n<h2 data-section-id=\"1my2deb\" data-start=\"2966\" data-end=\"2979\">\u0646\u0645\u0648\u0646\u0647 \u0633\u0627\u062f\u0647<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">inset<\/span> {\r\n  -webkit-clip-path:\r\n    <span class=\"\u037cg\">inset<\/span>(<span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">25<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">10<\/span><span class=\"\u037cg\">%<\/span>);\r\n\r\n  clip-path:\r\n    <span class=\"\u037cg\">inset<\/span>(<span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">25<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">10<\/span><span class=\"\u037cg\">%<\/span>);\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"3095\" data-end=\"3098\" \/>\n<h2 data-section-id=\"140mv2k\" data-start=\"3100\" data-end=\"3125\">\u0645\u0633\u062a\u0637\u06cc\u0644 \u0628\u0627 \u06af\u0648\u0634\u0647\u200c\u0647\u0627\u06cc \u06af\u0631\u062f<\/h2>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">inset2<\/span> {\r\n  -webkit-clip-path:\r\n    <span class=\"\u037cg\">inset<\/span>(\r\n      <span class=\"\u037cj\">45<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">33<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">10<\/span><span class=\"\u037cg\">%<\/span>\r\n      <span class=\"\u037cj\">round<\/span> <span class=\"\u037cj\">10<\/span><span class=\"\u037cg\">px<\/span>\r\n    );\r\n\r\n  clip-path:\r\n    <span class=\"\u037cg\">inset<\/span>(\r\n      <span class=\"\u037cj\">45<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">33<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">10<\/span><span class=\"\u037cg\">%<\/span>\r\n      <span class=\"\u037cj\">round<\/span> <span class=\"\u037cj\">10<\/span><span class=\"\u037cg\">px<\/span>\r\n    );\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3298\" data-end=\"3310\">\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">round<\/span> 10<span class=\"\u037co\">px<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3335\" data-end=\"3363\">\u0628\u0627\u0639\u062b \u06af\u0631\u062f \u0634\u062f\u0646 \u06af\u0648\u0634\u0647\u200c\u0647\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<hr data-start=\"3365\" data-end=\"3368\" \/>\n<h1 data-section-id=\"1m50gu1\" data-start=\"3370\" data-end=\"3397\">\u0633\u0627\u062e\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627 clip-path<\/h1>\n<p data-start=\"3399\" data-end=\"3455\">\u06cc\u06a9\u06cc \u0627\u0632 \u062c\u0630\u0627\u0628\u200c\u062a\u0631\u06cc\u0646 \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc <code data-start=\"3426\" data-end=\"3437\">clip-path<\/code> \u0633\u0627\u062e\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0633\u062a.<\/p>\n<p data-start=\"3457\" data-end=\"3462\">\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">trigger-btn<\/span>:<span class=\"\u037cl\">hover<\/span> + <span class=\"\u037co\">img<\/span> {\r\n  animation: <span class=\"\u037cj\">magic<\/span> <span class=\"\u037cj\">4<\/span><span class=\"\u037cg\">s<\/span> <span class=\"\u037cj\">infinite<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3537\" data-end=\"3620\">\u062f\u0631\u0648\u0646 <code data-start=\"3542\" data-end=\"3554\">@keyframes<\/code> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0634\u06a9\u0644\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u062a\u0635\u0648\u06cc\u0631 \u0628\u06cc\u0646 \u0622\u0646\u200c\u0647\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f.<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037cg\">@keyframes<\/span> <span class=\"\u037co\">magic<\/span> {\r\n  <span class=\"\u037cj\">0<\/span><span class=\"\u037cg\">%<\/span> {\r\n    clip-path: <span class=\"\u037cg\">polygon<\/span>(\r\n      <span class=\"\u037cj\">0<\/span> <span class=\"\u037cj\">0<\/span>,\r\n      <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">0<\/span>,\r\n      <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span>,\r\n      <span class=\"\u037cj\">0<\/span> <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span>\r\n    );\r\n  }\r\n\r\n  <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span> {\r\n    clip-path: <span class=\"\u037cg\">polygon<\/span>(\r\n      <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">0<\/span>,\r\n      <span class=\"\u037cj\">50<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">0<\/span>,\r\n      <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span> <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span>,\r\n      <span class=\"\u037cj\">0<\/span> <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span>\r\n    );\r\n  }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3853\" data-end=\"3862\">\u0646\u06a9\u062a\u0647 \u0645\u0647\u0645:<\/p>\n<p data-start=\"3864\" data-end=\"3965\">\u062a\u0645\u0627\u0645 \u0645\u0631\u0627\u062d\u0644 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627\u06cc\u062f \u062a\u0639\u062f\u0627\u062f \u0646\u0642\u0627\u0637 \u06cc\u06a9\u0633\u0627\u0646\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f\u060c \u062f\u0631 \u063a\u06cc\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u062c\u0631\u0627 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<hr data-start=\"3967\" data-end=\"3970\" \/>\n<h1 data-section-id=\"1ee78dg\" data-start=\"3972\" data-end=\"4001\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0634\u06a9\u0627\u0644 SVG \u0633\u0641\u0627\u0631\u0634\u06cc<\/h1>\n<p data-start=\"4003\" data-end=\"4062\">\u0627\u06af\u0631 \u0627\u0634\u06a9\u0627\u0644 \u0622\u0645\u0627\u062f\u0647 \u06a9\u0627\u0641\u06cc \u0646\u0628\u0627\u0634\u0646\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 SVG \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"4064\" data-end=\"4077\">\u0627\u0628\u062a\u062f\u0627 \u062f\u0631 SVG:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\" data-custom-highlighting-behavior=\"boundary\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full border-0! border border-transparent\">\n<div class=\"h-full w-full\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\">\n<div class=\"group pointer-events-auto overflow-hidden corner-superellipse\/1.1 shadow-elevation-01 bg-token-bg-elevated-secondary rounded-3xl border border-gray-200 dark:border-gray-900 flex w-full min-h-24 w-full relative\">\n<p>&lt;img class=&#8221;my-0! block w-full object-contain min-h-24&#8243; src=&#8221;data:;base64,<\/p>\n<p>&#8221; \/&gt;<\/p>\n<div class=\"flex w-full items-center justify-center gap-1.5\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4220\" data-end=\"4231\">\u0633\u067e\u0633 \u062f\u0631 CSS:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">svg-shape<\/span> {\r\n  -webkit-clip-path:\r\n    <span class=\"\u037cj\">url<\/span>(<span class=\"\u037ck\">#my-shape<\/span>);\r\n\r\n  clip-path:\r\n    <span class=\"\u037cj\">url<\/span>(<span class=\"\u037ck\">#my-shape<\/span>);\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4335\" data-end=\"4405\">\u0628\u0647 \u0627\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628 \u0647\u0631 \u0634\u06a9\u0644 SVG \u062f\u0644\u062e\u0648\u0627\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u0627\u0633\u06a9 \u0628\u0631\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f.<\/p>\n<hr data-start=\"4407\" data-end=\"4410\" \/>\n<h1 data-section-id=\"j4fpcu\" data-start=\"4412\" data-end=\"4444\">\u0627\u0628\u0632\u0627\u0631 \u0645\u0641\u06cc\u062f \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a clip-path<\/h1>\n<p data-start=\"4446\" data-end=\"4485\">\u06cc\u06a9\u06cc \u0627\u0632 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0627\u0634\u06a9\u0627\u0644:<\/p>\n<p data-start=\"4487\" data-end=\"4497\"><strong data-start=\"4487\" data-end=\"4497\">Clippy<\/strong><\/p>\n<p data-start=\"4499\" data-end=\"4595\">\u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0634\u06a9\u0644 \u0645\u0648\u0631\u062f\u0646\u0638\u0631 \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0628\u0635\u0631\u06cc \u0637\u0631\u0627\u062d\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u06a9\u062f CSS \u0622\u0645\u0627\u062f\u0647 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<hr data-start=\"4597\" data-end=\"4600\" \/>\n<h1 data-section-id=\"13u76e4\" data-start=\"4602\" data-end=\"4621\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627<\/h1>\n<p data-start=\"4623\" data-end=\"4641\">\u0637\u0628\u0642 \u0622\u0645\u0627\u0631 \u0633\u0627\u0644 \u06f2\u06f0\u06f2\u06f0:<\/p>\n<p data-start=\"4643\" data-end=\"4701\">\u2705 \u062d\u062f\u0648\u062f \u06f9\u06f5\u066a \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u062f\u0646\u06cc\u0627 \u0627\u0632 <code data-start=\"4672\" data-end=\"4683\">clip-path<\/code> \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p data-start=\"4703\" data-end=\"4784\">\u0627\u0645\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u0647\u062a\u0631 \u0628\u0627 Safari \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0647\u0645\u06cc\u0634\u0647 \u0646\u0633\u062e\u0647 \u067e\u06cc\u0634\u0648\u0646\u062f\u062f\u0627\u0631 \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">-webkit-clip-path<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4816\" data-end=\"4824\">\u062f\u0631 \u06a9\u0646\u0627\u0631:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">clip-path<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"4848\" data-end=\"4851\" \/>\n<h1 data-section-id=\"qpvq47\" data-start=\"4853\" data-end=\"4863\">\u062c\u0645\u0639\u200c\u0628\u0646\u062f\u06cc<\/h1>\n<p data-start=\"4865\" data-end=\"5192\">\u0648\u06cc\u0698\u06af\u06cc <code data-start=\"4871\" data-end=\"4882\">clip-path<\/code> \u0627\u0628\u0632\u0627\u0631\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0628\u0631\u0634 \u062f\u0627\u062f\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u0639\u0646\u0627\u0635\u0631 HTML \u0627\u0633\u062a. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0648\u0627\u0628\u0639\u06cc \u0645\u0627\u0646\u0646\u062f <code data-start=\"4964\" data-end=\"4973\">polygon<\/code>\u060c <code data-start=\"4975\" data-end=\"4983\">circle<\/code>\u060c <code data-start=\"4985\" data-end=\"4994\">ellipse<\/code> \u0648 <code data-start=\"4997\" data-end=\"5004\">inset<\/code> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0634\u06a9\u0627\u0644 \u0645\u062a\u0646\u0648\u0639\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f \u0648 \u062d\u062a\u06cc \u0628\u0627 \u062a\u0631\u06a9\u06cc\u0628 \u0622\u0646 \u0628\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u062c\u0644\u0648\u0647\u200c\u0647\u0627\u06cc \u0628\u0635\u0631\u06cc \u062c\u0630\u0627\u0628\u06cc \u0633\u0627\u062e\u062a. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0634\u06a9\u0627\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc SVG \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0622\u0632\u0627\u062f\u06cc \u0639\u0645\u0644 \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f\u06cc \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p data-start=\"4865\" data-end=\"5192\">\u0627\u0632 \u0647\u0645\u0631\u0627\u0647\u06cc \u0634\u0645\u0627 \u0628\u0627 <strong><a href=\"https:\/\/parmin.cloud\/\">\u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f<\/a><\/strong> \u0633\u067e\u0627\u0633\u06af\u0632\u0627\u0631\u06cc\u0645.<\/p>\n<div style='text-align:center' class='yasr-auto-insert-visitor'><\/div>","protected":false},"excerpt":{"rendered":"<p>\u0645\u0642\u062f\u0645\u0647 \u0648\u06cc\u0698\u06af\u06cc clip-path \u06cc\u06a9\u06cc \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u062c\u0630\u0627\u0628 CSS \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0641\u0642\u0637 \u0628\u062e\u0634\u06cc \u0627\u0632 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f \u0648 \u0628\u0642\u06cc\u0647 \u0642\u0633\u0645\u062a\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0634 \u0628\u0632\u0646\u06cc\u062f (Clip \u06a9\u0646\u06cc\u062f). \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0648\u06cc \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0633\u062a: \u062a\u0635\u0627\u0648\u06cc\u0631 (Images) \u0639\u0646\u0627\u0635\u0631 HTML \u0639\u0646\u0627\u0635\u0631 SVG \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 clip-path \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0634\u06a9\u0627\u0644 \u0645\u062e\u062a\u0644\u0641\u06cc \u0645\u0627\u0646\u0646\u062f \u062f\u0627\u06cc\u0631\u0647\u060c \u0628\u06cc\u0636\u06cc\u060c \u0645\u062b\u0644\u062b\u060c [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":6427,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[67,190],"tags":[1174,1171,1170,1173,1172],"class_list":["post-6424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-67","category-programming","tag--clip-path--css","tag--polygon--circle--css","tag----css","tag-----css---"],"aioseo_notices":[],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/comments?post=6424"}],"version-history":[{"count":2,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6424\/revisions"}],"predecessor-version":[{"id":6426,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6424\/revisions\/6426"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media\/6427"}],"wp:attachment":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media?parent=6424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/categories?post=6424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/tags?post=6424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}