首页用HTML制作一个星形图案的三角形，当行数超过输入的数字是则返回

用HTML制作一个星形图案的三角形，当行数超过输入的数字是则返回

时间: 2024-10-11 13:16:05 浏览: 24

在HTML中，你可以使用CSS的伪元素和`<div>`元素组合来创建星形图案。下面是一个简单的例子，它可以根据用户输入的数值生成相应行数的等边三角形星形： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #f00; /* 使用红色作为星形颜色 */ } .triangle::before { content: ''; position: absolute; top: -25px; /* 上移半个三角形的高度 */ left: calc(50% - 50px); /* 计算出中间位置 */ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #f00; /* 边框颜色和大小与主三角形一致 */ } </style> </head> <body> <input type="number" id="inputNum" placeholder="请输入行数"> <button onclick="drawTriangle()">绘制三角形</button> <div id="triangle" class="triangle"></div> <script> function drawTriangle() { let num = document.getElementById('inputNum').value; if (num > 0) { let triangleDiv = document.getElementById('triangle'); for (let i = 1; i <= num; i++) { let newTriangle = document.createElement('div'); newTriangle.classList.add('triangle'); newTriangle.style.transform = `translateY(${i * 50}px)`; triangleDiv.appendChild(newTriangle); } } else { alert("请输入有效的行数"); } } </script> </body> </html> ``` 这个示例中，用户可以在输入框里输入想要的行数，点击“绘制三角形”按钮后，会根据输入值动态创建相应的三角形。每个三角形都是由两个半透明的三角形组成，通过CSS的`transform`属性实现了向下移动的效果。

阅读全文