代码演示：用 CSS 绘制三角形和阴影

前言

三角形是平面设计中常见的几何图形，在网页设计中也经常用于装饰和布局。CSS 提供了多种方法来创建三角形，包括使用 border、transform 和 clip-path 属性。在本文中，我们将介绍三种不同的方法，从最基本的方法到更高级的方法，并提供示例代码和详细的解释。

方法一：使用 border 属性

最简单的方法是使用 border 属性。我们可以通过设置 border-top 和 border-left 或 border-right 的宽度来创建三角形。例如，下面的代码创建了一个向右的等边三角形：

.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-left: 100px solid red;
  border-right: 100px solid transparent;
}

方法二：使用 transform 属性

另一种方法是使用 transform 属性。我们可以通过旋转一个矩形来创建三角形。例如，下面的代码创建了一个向下的等边三角形：

.triangle {
  width: 200px;
  height: 200px;
  background-color: red;
  transform: rotate(120deg);
}

方法三：使用 clip-path 属性

最后，我们还可以使用 clip-path 属性来创建三角形。clip-path 属性允许我们定义一个剪辑路径，该路径决定了元素的可见区域。例如，下面的代码创建了一个向上的等边三角形：

.triangle {
  width: 200px;
  height: 200px;
  background-color: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

应用阴影效果

在创建了三角形之后，我们可以使用 box-shadow 属性来应用阴影效果。box-shadow 属性允许我们为元素添加一个或多个阴影。例如，下面的代码为三角形添加了一个向右下角的阴影：

.triangle {
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}

结语

在本文中，我们介绍了三种不同的方法来使用 CSS 创建三角形并应用阴影效果。我们从最基本的方法开始，逐步介绍了更高级的方法。希望这些方法能帮助您在网页设计中创建出美观的三角形元素。