Question

现在我有一个像上面这样的表格但左右两侧没有三角形。我已经将这个功能添加到我的表单中，但它变成了一些静态的，而不是自适应的（我选择的大小通过像素仅考虑我的浏览器）。如果你给我一些链接，我会很高兴的。这个三角形相应地有三角形阴影，所以我不能使用：after和：before。最重要的是

Answer 1

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

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

＆＃13;

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;*/
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用CSS边框创建三角形，如此示例

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

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

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

3 个答案: