CSS 裁剪：创意形状

✏️ Editable

Loading...

Live Preview

⌘+Enter Run⌘+R Reset

Current StepStep 1/4

Unlocked Steps1/4

Next Suggestion

Complete current Step 1 first

1) Current Task & Steps

Current task: Step 1 - 创建圆形裁剪
使用 clip-path: circle() 将图片裁剪成圆形。

Write your code in `script.js` for the current Step.
Click "Run Validation" to check if rules pass.
Once current Step passes, the next step unlocks automatically.
You need to pass Step 1 first to unlock Step 2.

Step Deliverables (Check these)

Write the minimum runnable version first, then iterate based on validation hints.

2) Beginner Explanation (Current Step)

Step task: 使用 clip-path: circle() 将图片裁剪成圆形。

3) Starter Template (Type along)

// Write the minimum runnable version first, then complete the logic

4) Rule Validation & Hints

📋 当前任务 - Step 1

有圆形裁剪

💡 步骤提示

🔐 学习提示

📖 快速参考

**五边形：**

polygon(50% 0%, 100% 38%,
        82% 100%, 18% 100%, 0% 38%)

**六边形：**

polygon(25% 0%, 75% 0%, 100% 50%,
        75% 100%, 25% 100%, 0% 50%)

**星形：**

polygon(50% 0%, 61% 35%, 98% 35%,
        68% 57%, 79% 91%, 50% 70%,
        21% 91%, 32% 57%, 2% 35%, 39% 35%)

**斜切：**

polygon(0 0, 100% 0, 100% 80%, 0 100%)

About This Exercise

在这个实验中，你将学习 CSS clip-path，创建独特的元素形状。

clip-path 可以将任何元素裁剪成各种形状，实现创意设计效果。

你将学到：

使用 circle() 创建圆形
使用 polygon() 创建多边形
使用 inset() 创建内凹矩形
为 clip-path 添加动画效果

Advanced⏱ 25-30 min

Learning Objectives

掌握 clip-path 基础形状
理解 polygon 坐标系统
学会创建复杂形状
了解 clip-path 动画

Scenario

你正在为一个创意机构设计作品集页面。需要使用 clip-path 实现： - 圆形头像裁剪 - 斜角卡片设计 - 多边形装饰元素

Why Do This

CSS is fundamentally about constraining layout and visual hierarchy, not memorizing properties.
Clarify the box model and layout rules first, then add visual polish — less rework that way.
Writing styles as reusable patterns is more valuable than tweaking a single page.

Hands-on Practice

Write the layout skeleton first (display/gap/align), then add colors and shadows.
Extract repeated styles into reusable classes.
Use validation rules to reverse-engineer the design intent of your current styles.

Common Mistakes

Adding margin after margin to fix positioning while ignoring layout containers.
Selectors nested too deep, causing style coupling.
Only caring about how it looks without considering maintainability.

Deliverable

A reusable component style template (layout rules + visual rules + naming conventions).

My Progress

Completed Steps0 / 4

Total Attempts0

Best Score0%

Completion Criteria (Checkable)

Confirm before completing this Lab

All rules for the current step passDesktop and mobile views both look correctStyle naming is clear and structure is maintainable

Reflection Questions (Recommended)

What was your main layout decision? Why did you choose it?

What change did you make specifically for maintainability?

What would you prioritize improving next time?

Structure and semanticsLayout and responsivenessNaming and reusability