在 CSS 中，我们可以使用伪元素 ::before 和 ::after，结合 content 属性和一些定位和变形操作来创建三角形。以下是两种常见的方法：
1、使用边框
可以利用 CSS 中的 border 属性来创建一个没有实际宽度和高度的矩形，然后通过对其边框颜色和宽度进行操作，让其中三条边透明，只显示一条边来创建三角形。
示例代码：
.arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid black;
}
这将创建一个向右的黑色三角形，边长为 10px。
CSS三角形布局出效果
2、使用变形
另一种创建三角形的方法是使用 CSS 的变形操作，如旋转和缩放。我们可以先创建一个矩形，然后通过旋转和缩放将其变形成三角形。
示例代码：
.arrow {
width: 0;
height: 0;
border: 10px solid black;
border-top-color: transparent;
border-left-color: transparent;
transform: rotate(45deg);
}
这将创建一个向右上方的黑色三角形，边长为 10px。我们先将矩形旋转 45 度，再通过边框颜色让其中两条边透明，最终形成三角形。以上是CSS布局出三角形向下。
3、使用css before 实现三角形代码
下面是一个使用 CSS 的 ::before 伪元素来创建三角形的示例代码：
.triangle {
position: relative;
width: 0;
height: 0;
}.triangle::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 50px;
border-color: transparent transparent #007bff transparent;
}
首先我们创建了一个具有相对定位的容器 .triangle，并将其宽度和高度设置为 0，这样在页面上就看不到它了。
接着，我们使用 ::before 伪元素来创建一个空的三角形，并对其进行绝对定位，使其与 .triangle 重叠。通过设置 border-style: solid，我们将三角形的边框样式设置为实线。然后，我们使用 border-width 属性设置三角形边框的宽度，其中第二个值 50px 表示底部边框的宽度，而第三个值 50px 和第四个值 50px 表示左右两侧边框的宽度。最后，我们使用 border-color 属性设置三角形边框的颜色，其中第一个值 transparent 表示顶部边框的颜色，第二个值 transparent 表示左侧边框的颜色，第三个值 #007bff 表示底部边框的颜色（这里使用的是蓝色），第四个值 transparent 表示右侧边框的颜色。这样，我们就创建了一个指向下方的蓝色三角形。
请注意，上述代码中，我们将三角形的宽度和高度都设置为 0，实际上三角形的大小是由 border-width 属性决定的。我们还将三角形的位置设置为左上角，这是因为我们使用了 position: absolute，而不是 position: relative，因此需要手动指定其位置。
4、css before after content实现三角形的实例代码
下面是一个使用 CSS 的 ::before 和 content 属性来创建三角形的示例代码：
.triangle {
position: relative;
width: 100px;
height: 100px;
background-color: #007bff;
}.triangle::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #007bff transparent transparent transparent;
}
首先，我们创建了一个具有相对定位的容器 .triangle，并设置其宽度和高度为 100px，并设置背景颜色为蓝色。
然后，我们使用 ::before 伪元素来创建一个空的三角形，并对其进行绝对定位。通过设置 content: ""，我们为 ::before 伪元素添加了一个空内容，这是必需的。我们使用 top: 100% 和 left: 50% 属性将三角形的位置设置为父容器的底部中心。然后，我们使用 margin-left: -10px 将三角形向左移动，以便使其底部正好位于父容器的底部中心。接着，我们使用 border-style: solid 将三角形的边框样式设置为实线，并使用 border-width 属性设置三角形边框的宽度，其中第一个值 10px 表示顶部边框的宽度，第二个值 10px 和第四个值 10px 表示左右两侧边框的宽度，第三个值 0 表示底部边框的宽度。最后，我们使用 border-color 属性设置三角形边框的颜色，其中第一个值 #007bff 表示顶部边框的颜色（与父容器相同），第二个值 transparent 表示左侧边框的颜色，第三个值 transparent 表示底部边框的颜色，第四个值 transparent 表示右侧边框的颜色。这样，我们就创建了一个向上的蓝色三角形。
请注意，上述代码中，我们使用了 margin-left: -10px 将三角形向左移动了一半的宽度，这是因为我们将三角形的位置设置为父容器的底部中心，而 left: 50% 表示三角形的左侧应该位于父容器的中心位置。