使用css画一个三角形

可以使用CSS的border属性来创建一个三角形：```
div {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

相关问题

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 可以根据需要进行调整，颜色也可以替换为其他颜色。