الأدوات · CSS · مولّد clip-path · الأدلة
أدلة مولّد clip-path
ثلاث قراءات قصيرة: لماذا يهم هذا الأمر، وكيفية القيام به خطوة بخطوة، وحالة استخدام واحدة محددة.
Why Shape Elements With CSS clip-path Instead of Cropped Images
A hexagon avatar or an angled hero can be baked into the image file, or cut by the browser at render time. clip-path does the cutting in CSS, which keeps one source image and one line to change, with a few side effects worth knowing first.
اقرأ الدليلHow to Build a CSS clip-path Polygon by Dragging Points
Start from one of eight presets, drag the points into place, add or remove points as the shape needs, and copy a polygon() value that scales with any box. Here is the process, with the limits the tool actually has.
اقرأ الدليلMaking a Hexagon Profile Photo With CSS clip-path
A hexagon avatar looks like one line of CSS, then the hexagon comes out squashed, the border vanishes on four sides and the shadow is gone. Here is the whole job, including the three fixes.
اقرأ الدليل