如何在三角形表格上制作透明边框？

Question

如您所见，表单具有双透明边框。如果你给我一些链接或者很少编辑我的代码片段，我会很高兴。重要的是边界透明，不透明度在0.3-0.6之间

＆＃13;

＆＃13;

form {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 30px 20px;
  border: none;
  font-family: sans-serif;
  height: 150px;
}
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;
}
.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;
}

＆＃13;

<form class="rhombus">
  <div class="header">SOME TEXT</div>
  <input name="name" placeholder="Your name"/>
  <input name="phone" placeholder="Your mobile phone"/>
  <button type="submit">SEND</button>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用CSS轻松完成此操作，如下面的代码段所示：

• 为两个伪元素添加border所需的宽度和颜色。 Nullify :before伪元素底部的边框（生成形状上半部分的边框）和:after伪元素顶部边框（生成下半部分的边框） ）。
• 添加填充（与border完全相同）并将背景剪辑为仅在内容框中。这将使元素的填充区域透明。

＆＃13;

＆＃13;

form {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 30px 20px;
  border: none;
  font-family: sans-serif;
  height: 150px;
}
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;
  background-clip: content-box;
  border: 2px solid rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.rhombus:before {
  top: 0;
  padding: 2px 2px 0px 2px;
  border-width: 2px 2px 0px 2px;
  -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;
}
.rhombus:after {
  bottom: 0;
  padding: 0px 2px 2px 2px;
  border-width: 0px 2px 2px 2px;
  -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;
}
*,
*:after,
*:before {
  box-sizing: border-box;
}
body {
  background: radial-gradient(circle at center, chocolate, sandybrown);
  min-height: 100vh;
}

＆＃13;

<form class="rhombus">
  <div class="header">SOME TEXT</div>
  <input name="name" placeholder="Your name" />
  <input name="phone" placeholder="Your mobile phone" />
  <button type="submit">SEND</button>
</form>

＆＃13;

＆＃13;

＆＃13;

如果内边框实际上不是透明的（有问题的图像没有透明的内边框），那么它会变得稍微复杂一点，但仍然可以完成。我们需要线性渐变背景图像而不是纯色，将一个图层剪切到内容区域内，而另一个图层也适用于填充区域（使用background-clip属性）。

我们正在使用linear-gradient背景图像，因为应用多种颜色，控制尺寸的可能性与渐变颜色不同。

＆＃13;

＆＃13;

form {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 30px 20px;
  border: none;
  font-family: sans-serif;
  height: 150px;
}
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: linear-gradient(#1E9BAF, #1E9BAF), linear-gradient(white, white);
  background-clip: content-box, padding-box;
  border: 2px solid rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.rhombus:before {
  top: 0;
  padding: 2px 2px 0px 2px;
  border-width: 2px 2px 0px 2px;
  -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;
}
.rhombus:after {
  bottom: 0;
  padding: 0px 2px 2px 2px;
  border-width: 0px 2px 2px 2px;
  -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;
}
*,
*:after,
*:before {
  box-sizing: border-box;
}
body {
  background: radial-gradient(circle at center, chocolate, sandybrown);
  min-height: 100vh;
}

＆＃13;

<form class="rhombus">
  <div class="header">SOME TEXT</div>
  <input name="name" placeholder="Your name" />
  <input name="phone" placeholder="Your mobile phone" />
  <button type="submit">SEND</button>
</form>

＆＃13;

＆＃13;

＆＃13;