css红色三角形

你可以通过以下 CSS 代码实现一个红色三角形：

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

在 HTML 中添加一个元素并设置其类名为 `triangle` 即可看到效果。

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

相关问题

css红色三角形 尖角冲下

将红色三角形的尖角冲下可以通过修改 CSS 属性 `border-bottom` 和 `border-left` 或 `border-right` 来实现。具体地，可以将 `border-bottom` 属性值设为 0， `border-left` 或 `border-right` 属性值设为 50px，如下所示：

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

这样就能得到一个尖角冲下的红色三角形。同样在 HTML 中添加一个元素并设置其类名为 `triangle` 即可看到效果。

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

html三角形正方形代码,用CSS画三角形，纯CSS绘制三角形的代码

绘制三角形的纯CSS代码：

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

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #f00; /* 上边为红色 */
  border-right: 50px solid transparent; /* 右边为透明 */
  border-bottom: 50px solid transparent; /* 下边为透明 */
  border-left: 50px solid transparent; /* 左边为透明 */
}

绘制正方形的HTML代码：

<div class="square"></div>

.square {
  width: 100px;
  height: 100px;
  background-color: #f00;
}