如何使用输入和按钮创建三角形的形式？ [复制]

Question

现在我有一个类似上面的表格，但左右两边没有三角形。我已经在我的表单中实现了这个功能，但它变成了一些静态的，而不是自适应的（我通过仅考虑我的浏览器的像素来选择大小）。如果您提供一些链接，我将非常高兴。这种三角形形式有相应的三角形阴影，所以我不能使用:after和:before。最重要的

Answer 1

另一种方法是使用 CSS 转换。主要思想在Elongated hexagon shaped button using only one element中描述。

您可以将 box-shadow 直接添加到 .rhombus:before 和 :after （但我注意到 Mozilla 中存在一些问题），或者只是使用偏移量和这些伪元素的副本制作另一个包装器。

form {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 30px 20px;
  border: none;
  font-family: sans-serif;
}
form .header {
  flex-basis: 100%;
  margin: -10px 0 10px;
  text-align: center;
  color: white;
}
form input,
form button {
  flex-grow: 1;
  height: 30px;
  margin: 0 5px;
  padding: 0 5px;
  box-sizing: border-box;
}
form button[type="submit"] {
  background-color: #FFD900;
}
.rhombus {
  position: relative;
  -webkit-perspective: 800px;
  perspective: 800px;
}
.rhombus:before,
.rhombus:after {
  content: "";
  position: absolute;
  left: 0;
  height: 50%;
  width: 100%;
  background-color: #1E9BAF;
  z-index: -1;
}
.rhombus:before {
  top: 0;
  -webkit-transform: rotateX(30deg);
  -webkit-transform-origin: center bottom;
  -ms-transform: rotateX(30deg);
  -ms-transform-origin: center bottom;
  transform: rotateX(30deg);
  transform-origin: center bottom;
  /*box-shadow: 3px 5px #DDD;*/
}
.rhombus:after {
  bottom: 0;
  -webkit-transform: rotateX(-30deg);
  -webkit-transform-origin: center top;
  -ms-transform: rotateX(-30deg);
  -ms-transform-origin: center top;
  transform: rotateX(-30deg);
  transform-origin: center top;
  /*box-shadow: 5px 5px #DDD;*/
}

<form class="rhombus">
<div class="header">ОСТАВИТЬ ЗАЯВКУ</div>
<input name="name" placeholder="Ваше имя"/>
<input name="phone" placeholder="Ваш номер телефона"/>
<button type="submit">ОТПРАВИТЬ</button>
</form>

Answer 2

你可以像这个例子一样使用 CSS 边框创建三角形

.form {
    width: 400px;
    height: 80px;
    margin: 0px auto;
    background: #1E9BAF;
    position: relative;
    box-shadow: -7px 15px 0px -5px rgba(0, 0, 0, 0.3);
}

.triangle, 
.triangle > div {
    width: 0px;
    height: 0px;
    position: absolute;
    border: 40px solid transparent;
}

.leftTriangle {    
    left: -55px;
    border-right: 15px solid #1E9BAF;
}

.leftTriangle > div {
  left: -42px;
  top: -30px;
  z-index: -1;
  border-right: 15px solid rgba(0, 0, 0, 0.3);
}   

.rightTriangle {
    right: -55px;
    border-left: 15px solid #1E9BAF;
}

.rightTriangle > div {
  right: -28px;
  top: -30px;
  z-index: -1;
  border-left: 15px solid rgba(0, 0, 0, 0.3);
} 

<div class="form">
    <div class="triangle leftTriangle">
        <div></div>
    </div>
    <div class="triangle rightTriangle">
        <div></div>
    </div>
</div>

Answer 3

与您之前的问题类似的答案:)。 4 个渐变 + background-size 也可以在这里完成工作：

form {
  font-size:2em;
  background: 
    linear-gradient(-250deg, transparent 1em, #1E9BAF 1.01em) top left no-repeat, 
    linear-gradient( 70deg, transparent 1em, #1E9BAF 1.01em) bottom left no-repeat, 
    linear-gradient( 250deg, transparent 1em, #1E9BAF 1.01em) top right no-repeat, 
    linear-gradient( -70deg, transparent 1em, #1E9BAF 1.01em) bottom right no-repeat;
  background-size: 60% 50.3%;
  box-shadow:0 1.25em 15px -1.25em ;
  background-size: 60% 50%;
  margin: 2em;
  padding:0.5em;
  text-align: center
}
label{display:block;color:white }
[type] {background:linear-gradient(to top, #ffab00, #fff800);}

<form>
  <label>texting</label>
  <input placeholder="? Name"/> <input placeholder="☎ phone"/> <input type="submit" value="submit"/>
</form>

updated pen