当前位置：首页 > article >正文

绘制三角形、正六边形、五角星、六角星

article 2025/1/13 9:02:38

<!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>

查看全文

http://www.kler.cn/a/500547.html