如何制作与标题重叠的多边形形状？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何制作与标题重叠的多边形形状？相关的知识，希望对你有一定的参考价值。
需要帮助来弄清楚如何制作这种形式：！（https://i.imgur.com/Kdrx1jP.png）。
我知道如何使用bootstrap设置表单的样式，但我无法弄清楚如何塑造容器div。当我滚动时，我也不能让它重叠标题而不移动它。
答案
首先，您可以看一下CSS Shapes的声明：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
另一答案
为此，学习如何使用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>以上是关于如何制作与标题重叠的多边形形状？的主要内容，如果未能解决你的问题，请参考以下文章