如何用JavaScript将Div从正方形转换为三角形？

要实现将正方形转为三角形，核心是利用CSS边框特性（元素宽高为0时，边框会形成几何形状），配合JavaScript切换CSS类来完成样式变更。以下是修改后的完整代码：

HTML（无需修改） #

<div id="outer">
  <div id="inner"></div>
</div>

<button id="btn-1">Change Color</button>
<button id="btn-2">Change Shape</button>

CSS（新增三角形样式类） #

#outer {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  margin: 0.5rem auto;
  background-color: #8a2be2;
  padding: 0.5rem;
}

#inner {
  width: 150px;
  height: 150px;
  background-color: white;
  margin: 70px 0px 0px 72px;
  /* 添加过渡动画，让形状切换更平滑 */
  transition: all 0.3s ease;
}

/* 新增三角形样式类 */
#inner.triangle {
  width: 0;
  height: 0;
  background-color: transparent;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 150px solid white;
  margin: 70px 0 0 75px;
}

button {
  width: 10rem;
  height: 2rem;
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 5px 30px 5px;
  margin-top: 20px;
  font-family: sans-serif;
}

button:hover {
  box-shadow: 0px 0px 12px 2px grey;
  cursor: pointer;
}

JavaScript（修改形状切换逻辑） #

var outerDiv = document.getElementById('outer');
var innerDiv = document.getElementById('inner');
var colorButton = document.getElementById('btn-1');
var shapeButton = document.getElementById('btn-2');

colorButton.addEventListener('click', function() {
  outerDiv.style.backgroundColor = "green";
});

shapeButton.addEventListener('click', function() {
  // 切换三角形类
  innerDiv.classList.toggle('triangle');
  // 根据当前状态切换文本
  innerDiv.innerText = innerDiv.classList.contains('triangle') ? "Triangle" : "Square";
});

关键说明： #

1. 三角形实现原理：当元素宽高设为0时，设置三边透明、一边有颜色的边框，就会形成三角形。这里用border-bottom实现向下的三角形，调整边框方向可得到不同朝向的三角形。
2. 类切换逻辑：使用classList.toggle()一键切换元素的类，实现点击按钮在正方形和三角形之间来回切换的效果，比直接修改内联样式更易维护。
3. 过渡动画：给#inner添加transition属性，让形状切换过程更平滑，提升用户体验。

内容的提问来源于stack exchange，提问作者Ashish Mehra