在CSS中，你可以使用多种方法来实现三角形。以下是两种常见的方法：
方法一：使用边框（border）
你可以使用一个空div，并利用其边框的宽度和颜色来创建三角形。例如，如果你想创建一个朝上的三角形，你可以这样写：
创建一个向上的三角形
HTML代码：
html
<div class="triangle-up"></div>CSS代码：
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red; /* 你可以更改颜色 */
}-
width和height设置为 0 创建一个没有填充的三角形。 -
border-left和border-right设置为透明，因此它们不会被看见。 -
border-bottom设置为实色，形成三角形的底部。
要创建其他方向的三角形，可以调整相应的边框属性。例如，要创建一个向下的三角形，只需将 border-bottom 设置为透明，并为 border-top 设置实色。
创建一个向下的三角形
HTML代码与上面相同。CSS代码稍有不同：
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid red; /* 与向上的三角形相比，这里是固定的边框 */
border-right: 50px solid red; /* 这里是固定的边框 */
border-top: 100px solid transparent; /* 更改透明边框的大小以调整三角形的大小 */
}创建一个向左的三角形
HTML代码与上面相同。CSS代码：
.triangle-left {
width: 0;
height: 100px; /* 可以根据需要调整高度 */
border-top: 50px solid transparent; /* 上边框为透明 */
border-bottom: 50px solid transparent; /* 下边框为透明 */
border-right: 100px solid red; /* 左边的边框是颜色 */
}创建一个向右的三角形
HTML代码与上面相同。CSS代码：
.triangle-right {
width: 100px; /* 可以根据需要调整宽度 */
height: 0;
border-top: 100px solid transparent; /* 上边框为透明 */
border-bottom: 100px solid transparent; /* 下边框为透明 */
border-left: 100px solid red; /* 右边的边框是颜色 */
}这些方法利用了CSS的边框属性，通过设置不同方向的边框颜色和大小来创建三角形。你可以根据需要调整大小和颜色。记住，你可以通过改变border-width的值来调整三角形的大小，通过改变border-color的值来改变三角形的颜色。
方法二：使用线性渐变（linear-gradient）
你也可以使用CSS的线性渐变功能来创建三角形。这种方法通常需要配合clip-path或mask属性来使用。例如：
HTML
<div class="triangle-down "></div>css
.triangle-down {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
background: linear-gradient(red); /* 设置你想要的颜色 */
clip-path: polygon(0% 0%, 100% 50%, 0% 100%); /* 这将创建一个朝下的三角形 */
}
在这个例子中，我们首先定义了一个边框来创建一个矩形，然后使用clip-path属性来裁剪这个矩形，只留下一个三角形的部分。这种方法也可以用于创建其他朝向的三角形，只需改变`clip-path`中的坐标值即可。但是这种方法通常需要更复杂的CSS语法，而且在兼容性方面可能没有使用边框的方法那么优秀。
这两种方法各有其优缺点，你可以根据具体的项目需求来选择合适的方法。如果你需要一个简单的、跨浏览器兼容的解决方案，那么使用边框的方法可能更合适。如果你需要更多的控制力，比如需要创建更复杂的形状或者需要更精细的渐变效果，那么使用线性渐变的方法可能更合适。
标签：solid,制作,100px,边框,三角形,border,transparent,css From： https://blog.csdn.net/BANaanaa/article/details/141370543