Question

需要帮助弄清楚如何制作这种形式：！（https://i.imgur.com/Kdrx1jP.png）。

我知道如何使用Bootstrap设置表单样式，但我不知道如何调整容器div的形状。滚动时，如果不移动标题，也无法使其与标题重叠。

Answer 1

为此，学习如何使用css创建结构。为此创建一个五边形。

#pentagon {
width: 100px;
height: 55px;
background: red;
position: relative;
  margin: 100px 0 0;
}

#pentagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}

<div id="pentagon">
</div>

Answer 2

首先，您可以在这里查看CSS形状的声明： https://developer.mozilla.org/de/docs/Web/CSS/CSS_Shapes

但是如您所见，并不是所有的浏览器都支持它，因此更好的解决方案可能是这样的：

标记：

<header>Header</header>
<form>
  <label for="lastname">Lastname: </label>
  <input type="text" id="lastname" />
  <br><br>
  <label for="firstname">Firstname: </label>
  <input type="text" id="firstname" />
  <br>
  <br>
  <input type="submit" value="Submit">
</form>

CSS：

* {
    box-sizing: border-box;
}
header {
  height: 100px; 
  text-align:center;
  line-height: 100px;
  background-color: gold;
}
form {
  background-color: lightgreen;
  margin: -10px auto;
  padding: 20px;
  width: 240px;
  position: relative;
}

form::before {
  content: '';
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent; 
  border-right: 20px solid transparent; 
  border-bottom: 20px solid lightgreen;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -20px;
}

form::after {
  content: '';
  width: 0; 
  height: 0;
  border-left: 120px solid transparent; 
  border-right: 120px solid transparent; 
  border-top: 70px solid lightgreen;
  position: absolute;
  bottom: -70px;
  left: 0;
}

input {
  display: block;
  width: 100%;
}

在CodePen上查看： https://codepen.io/moritz-jaeger/pen/wXZNNP

如何制作与标头重叠的多边形折线形式？

2 个答案: