css 长方形的三角形

CSS 可以用来创建长方形元素上的三角形形状，这通常用于设计箭头、图标或其他指向特定方向的符号。这里有一个简单的示例，展示如何使用伪元素 `::before` 和 `::after` 来创建两个对称的三角形：

.triangle-container {
  position: relative;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ff0000; /* 你可以更改颜色 */
}

.triangle:before,
.triangle:after {
  content: "";
  position: absolute;
  top: calc(50% - 100px / 2);
}

.triangle:before {
  left: -25px;
}

在这个例子中，`.triangle` 容器设置了宽高为0，然后使用 `border-bottom` 创建了三角形的基础形状，颜色设为红色。`::before` 和 `::after` 伪元素分别放在三角形的左右两侧，通过调整 `left` 或 `right` 属性及偏移量 `-25px`，使得它们形成对称的三角形。

如果你想让这个三角形适应某个特定宽度的容器，只需改变 `.triangle` 的 `border-width` 值即可。相关问题：

1. 如何使用 CSS 实现不规则三角形？
2. 如何使三角形旋转或倾斜？
3. 这种方法能否应用于响应式设计？如果需要，有什么变通方法？