第一次听见这个问题的时候觉得很简单，但是的确想了好久都没有想出方法，也是找了很多方法才知道原来如此简单，还是我思维不够活跃
代码如下：
CSS：
/* 通过修改边框来修改三角形的形状 */ #border { width: 0; height: 0; border-top: yellowgreen 100px solid; border-bottom: blue 100px solid; border-left: aqua 100px solid; border-right: yellow 100px solid; } #but button { border: none; background-color: aqua; width: 36.45px; height: 30px; }
HTML：
<!-- 三角形 --> <div id="border"></div> <!-- 选择显示哪个方向的三角 --> <div id="but"> <button id="shang">上</button> <button id="xia">下</button> <button id="zuo">左</button> <button id="you">右</button> <button id="quan">全</button> </div>
JS（可有可无，可以直接把其他的边框设置成隐藏）：
shang.addEventListener('click', () => { border.style.borderTop = "yellowgreen 100px solid" border.style.borderBottom = "#FFFFFF 100px solid" border.style.borderLeft = "#FFFFFF 100px solid" border.style.borderRight = "#FFFFFF 100px solid" }) xia.addEventListener('click', () => { border.style.borderTop = "#FFFFFF 100px solid" border.style.borderBottom = "blue 100px solid" border.style.borderLeft = "#FFFFFF 100px solid" border.style.borderRight = "#FFFFFF 100px solid" }) zuo.addEventListener('click', () => { border.style.borderTop = "#FFFFFF 100px solid" border.style.borderBottom = "#FFFFFF 100px solid" border.style.borderLeft = "aqua 100px solid" border.style.borderRight = "#FFFFFF 100px solid" }) you.addEventListener('click', () => { border.style.borderTop = "#FFFFFF 100px solid" border.style.borderBottom = "#FFFFFF 100px solid" border.style.borderLeft = "#FFFFFF 100px solid" border.style.borderRight = "yellow 100px solid" }) quan.addEventListener('click', () => { border.style.borderTop = "yellowgreen 100px solid" border.style.borderBottom = "blue 100px solid" border.style.borderLeft = "aqua 100px solid" border.style.borderRight = "yellow 100px solid" })
最终效果：
仔细琢磨了一下，的确是很神奇
