如何在五角形div顶部放置input输入字段？

我来帮你搞定这个问题！你现在的五角形确实用边框模拟出来了，但input定位不对主要有两个原因：一是HTML结构顺序错误（<head>和<body>标签搞反了），二是内部绝对定位的容器没有匹配到五角形顶部伪元素的位置。咱们一步步来修正：

问题分析 #

你的五角形是通过主div的上边框+:before伪元素的下边框组合出来的，顶部的三角形区域是伪元素生成的，所以直接给内部div设position:absolute但没找准坐标，就会偏离顶部。

修正后的完整代码 #

HTML + CSS 部分 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 创建五角形形状 */
        #pentagon {
            position: relative;
            width: 54px;
            box-sizing: content-box;
            border-width: 50px 18px 0;
            border-style: solid;
            border-color: red transparent;
            margin: 40px;
        }
        #pentagon:before {
            content: "";
            position: absolute;
            height: 0;
            width: 0;
            top: -85px;
            left: -18px;
            border-width: 0 45px 35px;
            border-style: solid;
            border-color: transparent transparent red;
        }
        /* 专门的input容器定位 */
        .input-container {
            position: absolute;
            top: -75px; /* 精准对齐五角形顶部区域 */
            left: 50%;
            transform: translateX(-50%); /* 让input水平居中 */
        }
        /* 优化input样式适配空间 */
        .input-container input {
            width: 30px;
            text-align: center;
            padding: 2px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="pentagon">
        <div class="input-container">
            <input type="text" />
        </div>
    </div>
</body>
</html>

关键改动说明 #

• 修正HTML结构：把<head>放在<body>外面，这是标准的HTML文档结构，避免浏览器解析出错。
• 精准定位input容器：给内部容器设置top: -75px，刚好对应五角形顶部伪元素的区域（伪元素top: -85px，高度35px，这个值能让input落在顶部三角形的中间位置），再用transform: translateX(-50%)实现水平居中。
• 优化input样式：缩小input宽度、添加内边距和边框，让它更适配五角形的顶部空间，不会超出形状范围。

现在你再运行代码，input就会稳稳地固定在五角形的顶部位置啦！

内容的提问来源于stack exchange，提问作者showtime