<!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 transform
if (!('transform' in document.body.style)) {
alert('您的浏览器不支持 CSS transform，无法正常显示效果。');
}
</script>
</body>
</html>
