CSS Triangles

如何用 CSS 创建三角形？

三角形是各种网页设计项目都可以使用的基本几何图形。通过采用几种简单的技术，可以在 CSS 中创建三角形。本教程将探讨两种在 CSS 中创建三角形的方法。

1. 使用边框创建三角形
2. 使用 Clip Path 创建三角形

有些形状比其他形状需要更多的“修复和技巧”。当使用 CSS 创建形状时，宽度、高度、顶部、右侧、左侧、边框、底部、变换以及伪元素（如 before 和 after）经常结合使用。此外，像 shape-outside 和 clip-path 这样的较新的 CSS 功能也可用于构建形状。

CSS 形状：简单方法

我们一直能够通过采用一些方法，使用标准的 CSS 属性创建正方形、圆形和三角形等简单形状。现在，让我们来看其中几个。

在本教程中，我们将探索如何使用 CSS 属性创建三角形。通常，直接使用 CSS 创建三角形是不可能的。

三角形是通过为每个三角形在 HTML 部分添加一个 div 来创建的。其思想是创建一个没有宽度或高度的盒子。边框的宽度决定了三角形的确切高度和宽度。例如，向上箭头的三角形的左边和右边是透明的，而底边框是彩色的。为了创建带有向下箭头、向左箭头和向右箭头边缘的三角形，我们必须保持顶部、右侧和左侧边框的颜色。

使用属性的主要作用

• border-top: 此 CSS 属性为元素的顶部添加边框。它接受边框的宽度和颜色值。
• border-left: CSS 属性为元素的左侧添加边框，并接受边框的宽度和颜色值。
• border-right: 此 CSS 属性为元素的右侧添加边框，并接受边框的宽度和颜色值。
• border-bottom: CSS 属性为元素的底部添加边框。它接受边框的宽度和颜色值。

通过边框创建三角形

使用 CSS 中的边框属性是创建三角形的最简单方法。我们可以通过生成一个矩形元素，然后利用边框属性生成三角形的倾斜边缘，从而轻松创建一个简单的三角形形状。以下是如何使用边框形成等边三角形的示例

输出

由于我们将在上面的示例中使用边框属性来构建三角形，因此我们创建了一个类名为 .main 的 div，并将该元素的宽度和高度设置为 2。通过设置 border-bottom 属性创建三角形的底部，并通过设置 border-left 和 border-right 的值创建三角形的倾斜边缘。通过将左边框和右边框设置为透明，我们创建了一个向元素中心倾斜的对角线边缘。

使用 Clip Path 创建三角形

我们还可以使用 CSS 中的 clip-path 功能来创建三角形。使用此属性，我们可以为元素构建一个唯一的剪裁路径，我们可以利用它来生成各种形状，例如三角形。

输出

由于三角形将使用边框和 clip-path 属性创建，因此我们创建一个类名为 .main 的 div，并将该元素的宽度和高度设置为 0。通过设置 border-radius 属性创建倾斜边缘，然后通过使用 clip-path 属性设置三个顶点的坐标，将矩形元素剪裁成三角形。将用逗号分隔的点列表的 x 和 y 坐标作为输入传递给 polygon 函数。