怎么用css画一个三角形

在CSS中，我们可以利用伪元素 `::before` 和 `::after` 来创建自定义的三角形形状。以下是几种常见的方法：

1. **纯边框三角形** (border trick):

   .triangle {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 100px solid red; /* 颜色替换为你需要的颜色 */
   }

2. **使用背景图像（background-size: cover;）**:

   .triangle-image {
     width: 0;
     height: 0;
     background-color: transparent;
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain; /* 或者 cover */
     margin-top: -50px; /* 调整高度负值以适应三角形尺寸 */
   }
   .triangle-image:before {
     content: "";
     display: block;
     width: 0;
     height: 0;
     border-top: 50px solid red; /* 颜色替换 */
   }

3. **SVG路径法** (虽然不是纯粹的CSS，但可以用于更复杂的设计)：

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <polygon points="0,100 50,0 100,100" fill="red"/>
   </svg>
   <div class="triangle-svg">
     <svg>...</svg>
   </div>

在CSS中添加样式覆盖SVG默认样式。