css画个三角

你可以使用 CSS 中的 border 属性来画三角形。

例如，要画一个向下的三角形，可以这样写：

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

这个代码片段会创建一个宽度为 0，高度为 0 的元素，并且使用 border 属性来画出一个向下的三角形。其中，border-left 和 border-right 用来画出三角形的两侧，border-top 用来画出三角形的底部。

你可以将 red 替换成其他颜色，来改变三角形的颜色。如果你想要画一个向上的三角形，可以将 border-top 替换成 border-bottom。

相关问题

css 画一个三角形

要使用CSS创建一个简单的三角形，你可以利用伪元素`:before`和`:after`以及边框(`border`)属性。下面是一个例子，演示如何通过设置宽度、高度为0，上下左右四个方向的边框宽度分别为不同值来创建一个上指的三角形：

.triangle {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0; /* 创建一个正方形 */
}

.triangle:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg); /* 旋转45度形成斜角 */
  border-width: 0 0 60px 60px; /* 上下两个边框为0，左右边框为60px */
  border-style: solid; /* 边框样式 */
  border-color: transparent transparent #000 transparent; /* 可以调整颜色 */
}

/* 如果你想让三角形朝下，只需改变旋转角度到-45度 */
.triangle:after {
  content: "";
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%) rotate(-45deg);
  border-width: 0 0 60px 60px;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
}

用css画一个三角形

可以使用 CSS 的 border 属性来绘制一个三角形，具体代码如下：

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

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

其中，width 和 height 设置为 0，表示这个 div 元素不占据任何空间。接着，使用 border-top 和 border-bottom 绘制上下两个三角形，同时使用 border-left 绘制左侧的三角形。这里的值 50px 可以根据需要进行调整，颜色也可以替换为其他颜色。