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

Question

如您所见，表单有双透明边框。如果您给我一些 link 或稍微修改一下我的代码片段，我会很高兴。重要的是边框透明并且不透明度在 0.3-0.6

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

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

Answer 1

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

给两个伪元素添加一个border需要的宽度和颜色。取消 :before 伪元素（生成形状上半部分的那个）底部的边框和 :after 伪元素（生成下半部分的那个）顶部的边框).
向它们添加填充（与 border 完全相同的方式）并将背景裁剪到仅在内容框内。这将使元素的填充区域透明。

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

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

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

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

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

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

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

How to make transparent border on the triangle form?

html

css

css-shapes