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

您可以将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;
  }
}

下面是codepen。缩放Codepen宽度小于360px后才能看到它。 https://codepen.io/vaishalik3/pen/MXMEBr?editors=1100

Answer 2

我认为::: after和:: before元素是维护多边形的不便方法。

如果您希望它是一个html元素（例如div），这就是我的建议：与clipping css函数一起使用calc。

没有剪辑-这将始终是矩形（直线或旋转），更改视口时永远不会拉伸/采用良好。

如果您希望某些部分不拉伸，请在适当的坐标中使用“ 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 3

使用伪元素，您的方向正确。但是，应该使用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进行裁剪以使其具有三角形形状。

希望对您有用！

如何使用伪元素制作的多边形具有响应性？

3 个答案: