如何使用CSS绘制自定义形状div，实现顶部放文字底部放输入框？

仅使用HTML和CSS完全可以实现你需要的异形样式效果，无需引入额外的图片或脚本资源。

实现方案 #

最简便的实现方式是使用CSS的clip-path属性，直接将容器裁剪为你需要的上宽下窄的梯形样式，你可以参考以下可运行的代码示例调整参数：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
.shape-container {
  width: 320px;
  /* polygon参数对应四个顶点坐标：左上、右上、右下、左下，可自行调整百分比修改底部收缩幅度 */
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
  border: 2px solid #666;
  display: flex;
  flex-direction: column;
}
/* 顶部文本区域 */
.top-text {
  padding: 24px 16px;
  text-align: center;
  font-size: 16px;
}
/* 分隔线 */
.split-line {
  height: 1px;
  background-color: #666;
  margin: 0 12%;
}
/* 底部输入区域 */
.bottom-input {
  padding: 16px;
  text-align: center;
}
.bottom-input input {
  width: 75%;
  padding: 6px 8px;
  border: 1px solid #999;
  border-radius: 2px;
}
</style>
</head>
<body>
  <div class="shape-container">
    <div class="top-text">顶部要放置的文本内容</div>
    <div class="split-line"></div>
    <div class="bottom-input">
      <input type="text" placeholder="输入框">
    </div>
  </div>
</body>
</html>

如果你需要兼容更低版本的浏览器，也可以使用CSS边框构造梯形伪元素拼接的方式实现，效果一致。

相关CSS形状生成工具推荐 #

• clip-path可视化生成工具：支持拖拽调整多边形顶点，自动输出对应CSS代码
• CSS异形边框生成工具：适合生成带边框的复杂异形样式
• CSS渐变形状生成工具：适合制作无描边的异形背景效果

你可以借助这类工具快速生成你需要的形状参数，不需要手动计算坐标数值。

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