使用css实现一个三角形

方案一:

1. 使用<div>元素创建一个矩形容器。
2. 设置容器的宽度和高度为0，并添加边框。
3. 设置容器的边框颜色为透明，边框宽度为0。
4. 使用border-width属性设置容器的边框宽度，来形成三角形的边。
5. 使用border-color属性设置容器的边框颜色，来形成三角形的线条。
6. 使用border-style属性设置容器的边框样式为solid，来显示边框。

<div class="triangle"></div>

<style>
.triangle {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
</style>

 

 

方案二：

1. 使用<div>元素创建一个矩形容器。
2. 设置容器的宽度和高度为0，并添加边框。
3. 使用border-width属性设置容器的边框宽度为0，并使用border-color属性设置容器的边框颜色为透明。
4. 使用transform属性对容器进行旋转，来形成三角形的角度。

 

<div class="triangle"></div>

<style>
.triangle {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: red;
  transform: rotate(45deg);
}
</style>