js画一个居中的三角形

可以使用CSS来画一个居中的三角形，代码如下：

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

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

这里使用 `border` 属性来画一个三角形，将上下左右的边框设置为透明，只显示下边框作为三角形的底部，然后将宽度和高度设置为0，通过 `margin: auto` 来实现居中。

相关问题

用js画一个居中的三角形

可以使用Canvas来画一个居中的三角形，代码如下：

<canvas id="myCanvas" width="200" height="200"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(0, 200);
ctx.lineTo(200, 200);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();

canvas.style.margin = 'auto';
canvas.style.display = 'block';

这里使用 `canvas` 元素和 `getContext('2d')` 方法来获取Canvas的上下文，然后使用 `beginPath` 方法开始绘制路径，使用 `moveTo` 和 `lineTo` 方法来画出三角形的三个点，使用 `closePath` 方法来闭合路径，最后设置填充颜色为红色并使用 `fill` 方法填充三角形。最后通过CSS设置 `margin: auto` 和 `display: block` 来居中显示Canvas元素。

javascript倒三角形居中

要实现倒三角形的居中，可以采用以下步骤：

1. 设置一个容器元素，设置它的宽度和高度，然后将它的 position 属性设置为 relative，这样后面我们的绝对定位元素将会以这个元素作为相对定位的基准。

2. 创建一个伪元素，使用绝对定位把它放在容器元素的中间。可以使用以下 CSS 代码实现：

   .container::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 100px solid #000;
   }

3. 设置三角形的样式，包括边框颜色、宽度和高度等。

下面是完整的 CSS 代码：

.container {
  width: 200px;
  height: 200px;
  position: relative;
}

.container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #000;
}