Как сделать форму с полигоном, которая перекрывает заголовок?

Question

Нужна помощь в выяснении, как сделать такую ​​форму: ! (https://i.imgur.com/Kdrx1jP.png).

Я знаю, как стилизовать форму с помощью начальной загрузки, но я не могу понять, как сформировать контейнер div. Я также не могу заставить его перекрывать заголовок, не перемещая его при прокрутке.

Answer 1

Сначала вы можете посмотреть здесь, где объявлены CSS Shapes: https://developer.mozilla.org/de/docs/Web/CSS/CSS_Shapes

Но, как вы можете видеть, это поддерживается не во всех браузерах, поэтому лучшим решением может быть что-то вроде этого:

Markup:

<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

Answer 2

Для этого научитесь создавать структуру с использованием 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>