Как сделать полигон из псевдоэлементов адаптивным?

Question

Я сделал форму, которая находится внутри многоугольника с псевдоэлементами. Я хотел бы, чтобы форма менялась по мере изменения размера экрана, но не могу понять, как заставить мою форму сделать это. Я устал, чтобы изменить ширину формы до 50%, чтобы форма всегда составляла 50% ширины экрана, но это не сработало для элементов psudeo

код ручки: https://codepen.io/coolblow/pen/WyqjRx

* {
  box-sizing: border-box;
}
header {
  height: 100px; 
  text-align:center;
  line-height: 100px;
  background-color: gold;
}
form {
  box-shadow: 0 0 15px 1px #303030;
  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%;
} 

* {
  box-sizing: border-box;
}
header {
  height: 100px; 
  text-align:center;
  line-height: 100px;
  background-color: gold;
}
form {
  box-shadow: 0 0 15px 1px #303030;
  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%;
}

<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>

Answer 1

По моему мнению, элементы :: after и :: before являются неудобным способом обслуживания многоугольника.

Если вы хотите, чтобы это был HTML-элемент, такой как div, я предлагаю следующее: используйте clipping вместе с calc css функцией.

без отсечения - это всегда будет прямоугольник (прямой или повернутый), он никогда не будет хорошо растягиваться / адаптироваться при изменении области просмотра.

Если вы хотите, чтобы какая-то часть была неэластичной, просто используйте единицы 'px' в соответствующих координатах.

пример:

    #my-polygon {
      min-height:100px;
    clip-path: polygon(0px 15%, 50% 0px, 100% 15%, 100% calc(100% - 20px), 50% 100%, 0px calc(100% - 20px));
    background-color:red;
    }

<div id="my-polygon"></div>

Answer 2

Вы находитесь в правильном направлении со своим псевдоэлементом. Но вместо использования границ для имитации вашей формы многоугольника, вы должны использовать clip-path. Ниже вы найдете фрагмент кода, используя его:

* {
  box-sizing: border-box;
}
header {
  height: 100px; 
  text-align:center;
  line-height: 100px;
  background-color: gold;
}
form {
  box-shadow: 0 0 15px 1px #303030;
  background-color: lightgreen;
  margin: -10px auto;
  padding: 20px;
  width: 50%;
  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: '';
  display: block;
  position: absolute;
  background-color:lightgreen;
  top: 100%;
  left: 0;
  width: 100%;
  min-height: 50px;
  clip-path: polygon(0px 0px, 50% 0px, 100% 0px, 100% calc(100% - 40px), 50% 100%, 0px calc(100% - 40px));
}

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

<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 (form::after). Я использовал position: absolute, чтобы поместить элемент в нижнюю часть вашего form. Я дал ему размер, и самая важная часть - это отсечение, используя clip-path, чтобы придать ему треугольную форму.

Надеюсь, это полезно для вас!

Answer 3

Вы можете использовать transform: scale для псевдоэлементов. Просто добавьте ниже Медиа-запрос в вашей таблице стилей.

Здесь я изменил размер с max-width: 360px

@media only screen and (max-width: 360px){
  form {
    width:160px;
  }
  form::after {
    transform: scale(0.67);
    transform-origin: left top;
  }
}

Ниже приведен кодекс. увидеть его после масштабирования ширины кода ручки менее 360px. https://codepen.io/vaishalik3/pen/MXMEBr?editors=1100