<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制图形</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}/* 三角形 */.single-triangle {width: 0;height: 0;border-left: 50px solid transparent;/* 调整长度可以改变三角形的宽度 */border-right: 50px solid transparent;/* 调整长度可以改变三角形的宽度 */border-bottom: 100px solid blue;/* 调整长度可以改变三角形的高度 */margin-right: 120px;/* 在三角形右侧添加间距 */}/* 正六边形 */.hexagon-container {position: relative;width: 100px;height: 100px;}.hexagon-triangle {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 86.6px solid blue;/* 50 * sqrt(3) */position: absolute;bottom: 0;transform-origin: 0 100%;}.hexagon-triangle:nth-child(1) {transform: rotate(0deg);border-bottom-color: red;}.hexagon-triangle:nth-child(2) {transform: rotate(60deg);border-bottom-color: orange;}.hexagon-triangle:nth-child(3) {transform: rotate(120deg);border-bottom-color: yellow;}.hexagon-triangle:nth-child(4) {transform: rotate(180deg);border-bottom-color: green;}.hexagon-triangle:nth-child(5) {transform: rotate(240deg);border-bottom-color: blue;}.hexagon-triangle:nth-child(6) {transform: rotate(300deg);border-bottom-color: purple;}h2 {margin-right: 100px;}/* 六角星 */.shape-holder {position: relative;width: 100px;height: 57.7px;/* 100 * sqrt(3) / 2 */margin-left: 30px;}.triangle-part {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 93.3px solid blue;/* 100 * sqrt(3) */position: absolute;bottom: 0;transform-origin: 50% 100%;}.triangle-part:nth-child(1) {transform: rotate(0deg);/* border-bottom-color: red; */}.triangle-part:nth-child(2) {transform: rotate(60deg);/* border-bottom-color: orange; */}.triangle-part:nth-child(3) {transform: rotate(120deg);/* border-bottom-color: yellow; */}.triangle-part:nth-child(4) {transform: rotate(180deg);/* border-bottom-color: green; */}.triangle-part:nth-child(5) {transform: rotate(240deg);/* border-bottom-color: blue; */}.triangle-part:nth-child(6) {transform: rotate(300deg);/* border-bottom-color: purple; */}</style>
</head><body><h1>三角形</h1><div class="single-triangle"></div><h2>正六边形</h2><div class="hexagon-container"><div class="hexagon-triangle"></div><div class="hexagon-triangle"></div><div class="hexagon-triangle"></div><div class="hexagon-triangle"></div><div class="hexagon-triangle"></div><div class="hexagon-triangle"></div></div><h1>五角星</h1><svg width="100" height="100" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;stroke:red;stroke-width:1" /></svg><h1>六角星</h1><div class="shape-holder"><div class="triangle-part"></div><div class="triangle-part"></div><div class="triangle-part"></div><div class="triangle-part"></div><div class="triangle-part"></div><div class="triangle-part"></div></div><script>// 错误处理：确保浏览器支持 CSS transformif (!('transform' in document.body.style)) {alert('您的浏览器不支持 CSS transform，无法正常显示效果。');}</script>
</body></html>
