css实现三角形 倒放

在CSS中，可以通过伪元素（`:before`或`:after`)和边框来创建三角形形状。要实现倒置的三角形，你需要使用负边距或定位。这里有一个基本的示例：

.triangle {
  position: relative; /* 或者设置为 absolute, fixed 等 */
  width: 0;
  height: 0;
}

.triangle:before {
  content: ""; /* 这里定义三角形的内容为空 */
  position: absolute;
  top: 0; /* 或者 bottom, 视具体需求调整 */
  left: 50%; /* 中心对齐三角形 */
  transform: translateX(-50%) rotate(180deg); /* 旋转180度使三角形倒置 */
  border-style: solid; /* 边框样式 */
  border-width: 0 30px 30px 0; /* 上、右、下、左宽度，创建三角形形状 */
  border-color: transparent transparent #f00; /* 可以自定义颜色，这里是红色 */
}

在上面的代码中，`.triangle`是一个容器，`:before`伪元素被用来生成三角形。通过调整`border-width`的值，你可以控制三角形的大小和倾斜角度。