CSS 如何在不使用边框和图片的情况下，在 div 上创建一个 CSS 三角形背景

在本文中，我们将介绍如何使用 CSS 创建一个三角形背景，而不需要使用边框和图片。CSS 提供了一些强大的技术和属性，可以帮助我们实现这一目标。

阅读更多：CSS 教程

使用伪元素和边框属性创建三角形

首先，我们可以使用 CSS 的伪元素和边框属性来创建一个三角形。下面是一个简单的示例：

.triangle {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid #000;
}

在上面的示例中，我们创建了一个具有零宽度和零高度的 div，然后使用边框属性创建了一个三角形。通过设置边框的颜色和宽度，我们可以改变三角形的外观。这是一个基本的三角形背景创建方法，但是在较复杂的设计中可能不够灵活。

使用 transform 和 rotate 属性创建旋转的三角形

另一种创建三角形背景的方法是使用 transform 和 rotate 属性。我们可以通过将一个正方形 div 进行旋转来创建一个三角形。下面是一个示例：

.triangle {
    width: 100px;
    height: 100px;
    background-color: #000;
    transform: rotate(45deg);
    transform-origin: top left;
}

在上面的示例中，我们首先创建了一个正方形的 div，并将其背景色设置为黑色。然后，我们使用 transform 属性将其旋转了45度，从而实现了一个三角形背景。通过调整宽度、高度和旋转角度，我们可以创建不同大小和形状的三角形。

使用线性渐变背景创建三角形

还有一种创建三角形背景的方法是使用线性渐变背景。我们可以在 CSS 中使用 linear-gradient 函数来创建一个线性渐变背景，然后将元素的大小调整为一个三角形。下面是一个示例：

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    background: linear-gradient(to bottom, #000 0%, #000 100%);
}

上述示例中，我们首先创建了一个具有零宽度和零高度的 div，并使用边框属性创建了一个三角形。然后，我们通过设置背景为线性渐变来实现三角形背景。通过调整颜色和渐变的方向，我们可以创建不同颜色和形状的三角形背景。