我热爱各种形状，尤其是色彩鲜艳的形状！网站上的形状与背景颜色、图片、横幅、分隔符、艺术作品等一样重要：它们有助于我们理解上下文，并通过 affordances 指导我们的操作。

几个月前，我为7岁的女儿开发了一个数学学习应用。除了基本的加减法外，我还想用形状来呈现问题。那时我开始熟悉 CSS clip-path 属性，这是在网页上创建形状的一种可靠方法。然后，我最终使用 clip-path 的强大功能构建了另一个名为 TryShape 的应用程序。

我将带您了解 TryShape 背后的故事，以及它如何帮助创建、管理、共享和导出形状。在此过程中，我们将深入探讨 CSS clip-path 以及它如何帮助我快速构建应用程序。

以下是一些重要的链接：

• TryShape 网站
• GitHub 代码库
• 视频演示
• 用于 React 的 clip-path 封装 npm 包

CSS clip-path 属性和形状

想象一下，你有一张普通的纸和一支铅笔，要在上面画一个形状（比如正方形）。你会怎么做？你很可能会从一个点开始，然后画一条线到达另一个点，然后重复三次才能回到初始点。你还必须确保你拥有平行且长度相同的对边。

因此，形状的基本要素包括点、线、方向、曲线、角度和长度等等。CSS clip-path 有助于指定许多这些属性来裁剪 HTML 元素的区域，以显示特定区域。裁剪区域内的部分将显示，其余部分将隐藏。它为开发人员提供了大量机会，可以使用 clip-path 属性创建各种形状。

了解更多关于裁剪以及它与遮罩的不同之处。

用于形状创建的 clip-path 值

clip-path 属性接受以下值来创建形状：

• circle()
• ellipse()
• inset()
• polygon()
• 使用 url() 函数的剪辑源
• path()

我们需要稍微理解一下基本坐标系才能使用这些值。当在元素上应用 clip-path 属性来创建形状时，我们必须考虑 x 轴、y 轴以及元素左上角的初始坐标 (0,0)。

这是一个带有 x 轴、y 轴和初始坐标 (0,0) 的 div 元素。

现在让我们使用 circle() 值来创建一个圆形形状。我们可以使用此值指定圆的位置和半径。例如，要在坐标位置 (70, 70) 处创建一个半径为 70px 的圆形形状，我们可以将 clip-path 属性值指定为：

clip-path: circle(70px at 70px 70px)

因此，圆的中心位于坐标 (70, 70) 处，半径为 70px。现在，只有这个圆形区域被裁剪并显示在元素上。元素的其余部分被隐藏，以创建圆形形状的印象。

接下来，如果我们想将位置指定为 (0,0) 会怎样？在这种情况下，圆的中心位于 (0,0) 位置，半径为 70px。这使得只有圆形的一部分在元素内可见。

让我们继续使用另外两个基本值 inset() 和 polygon()。我们使用 inset 来定义矩形形状。我们可以指定四个边可能具有的间隙，以从元素中裁剪一个区域。例如：

clip-path: inset(30px)

上面的 clip-path 值通过从元素边缘排除 30px 值来裁剪区域。我们可以在下面的图片中看到这一点。我们还可以为每个边指定不同的 inset 值。

接下来是 polygon() 值。我们可以使用一组顶点来创建一个多边形形状。请看这个例子：

clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)

在这里，我们指定了一组顶点来创建一个用于裁剪的区域。下图显示了每个顶点的位置，以创建一个多边形形状。我们可以根据需要指定任意数量的顶点。

接下来，让我们看一下 ellipse() 和 url() 值。ellipse() 值通过指定两个半径值和一个位置来帮助创建形状。在下图中，我们看到一个椭圆位于半径为 (50%,50%) 的位置，形状宽度为 70px，高度为 100px。

url() 是一个 CSS 函数，用于指定 clip-path 元素的 ID 值以呈现 SVG 形状。请看下图。我们使用 clipPath 和 path 元素定义了一个 SVG 形状。您可以使用 clipPath 元素的 ID 值作为 url() 函数的参数来呈现此形状。

此外，我们可以在 path() 函数中直接使用 path 值来绘制形状。

好了。我希望您已经了解了不同的 clip-path 属性值。有了这个理解，让我们来看一些实现并尝试一下。这里有一个示例，请使用它尝试添加、修改值以创建新的形状。

TryShape 介绍

现在该谈谈 TryShape 及其背景故事了。TryShape 是一款开源应用程序，可帮助创建、导出、共享和使用任何您选择的形状。您可以创建横幅、圆形、艺术品、多边形并将它们导出为 SVG、PNG 和 JPEG 文件。您还可以创建一个 CSS 代码片段以复制并在您的应用程序中使用。

TryShape 使用以下框架和库（当然还有 clip-path）构建：

• CSS clip-path：我们已经讨论了这个强大的 CSS 属性的功能。
• Next.js：最酷的基于 React 的框架。它帮助我创建页面、组件、交互和 API 以连接到后端数据库。
• HarperDB：一个灵活的数据库，用于存储数据并使用 SQL 和 NoSQL 交互来查询它们。TryShape 在 HarperDB 云中创建了其模式和表。Next.js API 与模式和表交互，以执行用户界面所需的 CRUD 操作。
• Firebase：来自 Google 的身份验证服务。TryShape 使用它来实现使用 Google、GitHub、Twitter 和其他帐户的社交登录。
• react-icons：一个用于 React 应用程序的所有图标的商店
• date-fns：用于日期格式化的现代轻量级库
• axios：简化 React 组件中的 API 调用
• styled-components：一种从 React 组件创建 CSS 规则的结构化方法
• react-clip-path：一个自制的模块，用于在 React 应用程序中处理 clip-path 属性
• react-draggable：使 HTML 元素在 React 应用程序中可拖动。TryShape 使用它来调整形状顶点的位置。
• downloadjs：触发 JavaScript 下载
• html-to-image：将 HTML 元素转换为图像（包括 SVG、JPEG 和 PNG）
• Vercel：最适合托管 Next.js 应用程序

使用 CSS clip-path 在 TryShape 中创建形状

让我重点介绍一下有助于使用 CSS clip-path 属性创建形状的源代码。下面的代码片段定义了一个容器元素 (Box) 的用户界面结构，该元素为 300px 正方形。Box 元素有两个子元素，Shadow 和 Component。

 props.handleChange(e)} width="300px">
  {
    props.shapeInformation.showShadow &&
    
  }
  

Shadow 组件定义了被 clip-path 裁剪隐藏的区域。我们创建它以显示浅色背景，使最终用户可以部分看到此区域。Component 用于分配 clip-path 值以显示裁剪区域。

请参见下面 Box、Shadow 和 Component 的 styled-component 定义：

// 使用 CSS 属性创建 UI 组件的 styled-components 代码

// 容器 div
const Box = styled.div`
  width: ${props => props.width || '100px'};
  height: ${props => props.height || '100px'};
  margin: 0 auto;
  position: relative;
`;

// Shadow 定义了被 `clip-path` 裁剪隐藏的区域
// 我们显示浅色背景以使此区域部分可见。
const Shadow = styled.div`
  background-color: ${props => props.backgroundColor || '#00c4ff'};
  opacity: 0.25;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
`;

// 获取 `clip-path` 值 (formula) 并将其设置为 `clip-path` 属性的实际组件。
const Component = styled.div`
  clip-path: ${props => props.formula}; // formula 是 clip-path 值
  background-color: ${props => props.backgroundColor || '#00c4ff'};
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
`;

请随时查看 GitHub 代码库中的完整代码库。

TryShape 的未来发展方向

TryShape 可以很好地处理使用后台 CSS clip-path 创建和管理基本形状。它有助于导出形状和 CSS 代码片段以在您的 Web 应用程序中使用。它有潜力发展出更多有价值的功能。主要功能是能够创建具有曲线边缘的形状。

为了支持曲线形状，我们需要在 TryShape 中支持以下值：

• 使用 url() 的剪辑源
• path()。

借助这些值，我们可以使用 SVG 创建形状，然后使用上述值之一。这是一个使用 SVG 支持创建形状的 url() CSS 函数示例。

Heart

然后是 CSS：

.heart {
  clip-path: url(#heart-path);
}

现在，让我们使用 path() 值创建一个形状。HTML 应该有一个像 div 这样的元素：

Curve

在 CSS 中：

.curve {
  clip-path: path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
}

结束语

我希望您喜欢我的 TryShape 应用程序，并了解其背后的理念、我考虑的策略、底层技术及其未来的潜力。请考虑尝试一下并查看源代码。当然，您可以随时通过问题、功能请求和代码为其做出贡献。

在结束之前，我想向您展示为 Hashnode 黑客马拉松准备的简短视频，TryShape 是参赛作品，最终入选获奖名单。我希望您喜欢它。

让我们联系。您可以在 Twitter 上 @ 我 (@tapasadhikary) 发表评论，或者随时关注。