Html 如何在三角形窗体上创建透明边框？

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

表单{
显示器：flex；
柔性包装：包装；
保证金：0；
填充：30px 20px；
边界：无；
字体系列：无衬线；
高度：150像素；
}
表格标题{
弹性基准：100%；
利润率：-10px 0 10px；
文本对齐：居中；
颜色：白色；
}
表格输入，
窗体按钮{
柔性生长：1；
高度：30px；
利润率：0.5px；
填充：0 5px；
框大小：边框框；
}
表单按钮[type=“submit”]{
背景色：#FFD900；
}
菱形{
位置：相对位置；
-webkit透视图：800px；
透视图：800px；
}
朗伯斯：以前，
朗伯斯先生：之后{
内容：“；
位置：绝对位置；
左：0；
身高：50%；
宽度：100%；
背景色：#1E9BAF；
z指数：-1；
}
朗布斯先生：以前{
排名：0；
-webkit变换：rotateX（30度）；
-webkit变换原点：中间-底部；
-ms变换：rotateX（30度）；
-ms变换原点：中心-底部；
变换：旋转（30度）；
变换原点：中心-底部；
}
朗伯斯先生：之后{
底部：0；
-webkit变换：rotateX（-30度）；
-webkit变换原点：中间-顶部；
-ms变换：rotateX（-30度）；
-ms变换原点：中心-顶部；
变换：rotateX（-30度）；
变换原点：中心-顶部；
}

一些文本
发送

您可以像下面的代码片段一样使用CSS轻松完成此操作：

• 将所需宽度和颜色的

  边框添加到两个伪元素中。将
  ：伪元素（生成形状上半部分的元素）之前和
  ：伪元素（生成下半部分的元素）之后的
  ：底部的边框置零

• 添加一个填充（与

  边框

  的方式完全相同），并将背景剪辑为仅位于内容框内。这将使元素的填充区域透明

表单{
显示器：flex；
柔性包装：包装；
保证金：0；
填充：30px 20px；
边界：无；
字体系列：无衬线；
高度：150像素；
}
表格标题{
弹性基准：100%；
利润率：-10px 0 10px；
文本对齐：居中；
颜色：白色；
}
表格输入，
窗体按钮{
柔性生长：1；
高度：30px；
利润率：0.5px；
填充：0 5px；
框大小：边框框；
}
表单按钮[type=“submit”]{
背景色：#FFD900；
}
菱形{
位置：相对位置；
-webkit透视图：800px；
透视图：800px；
}
朗伯斯：以前，
朗伯斯先生：之后{
内容：“；
位置：绝对位置；
左：0；
身高：50%；
宽度：100%；
背景色：#1E9BAF；
背景剪辑：内容框；
边框：2倍实心rgba（0,0,0,0.5）；
z指数：-1；
}
朗布斯先生：以前{
排名：0；
填充：2px2px0px2px；
边框宽度：2px2px0px2px；
-webkit变换：rotateX（30度）；
-webkit变换原点：中间-底部；
-ms变换：rotateX（30度）；
-ms变换原点：中心-底部；
变换：旋转（30度）；
变换原点：中心-底部；
}
朗伯斯先生：之后{
底部：0；
填充：0px 2px 2px 2px；
边框宽度：0px 2px 2px；
-webkit变换：rotateX（-30度）；
-webkit变换原点：中间-顶部；
-ms变换：rotateX（-30度）；
-ms变换原点：中心-顶部；
变换：rotateX（-30度）；
变换原点：中心-顶部；
}
*,
*：之后，
*：之前{
框大小：边框框；
}
身体{
背景：径向梯度（圆心、巧克力色、沙丁鱼色）；
最小高度：100vh；
}

一些文本
发送

寻求代码帮助的问题必须包含在问题中重现代码所需的最短代码。虽然您提供了一个链接，但如果链接无效，您的问题对其他将来的用户没有任何价值，因此具有相同问题的用户。这是另一个问题。这是关于边界的。关于Shadow抱歉，我第一次不明白，文本似乎给我带来了一些困难，在之前的问题中，chrome的渲染效果似乎不好（我已经提出了；））为chrome添加了模糊效果，并在伪主容器上使用了渐变）@GCyrillus:这是相当多的渐变。我的第二个代码段只使用了两个。剩下的只是边框和填充。第一个根本不使用渐变（尽管我怀疑这是否是OP想要的，因为所讨论的图像与描述不符）。另外，我只使用Chrome，代码片段的输出看起来也不错：）是的，我同意，它避免了转换，但rood/stairs效果似乎不够平滑：我的Chrome；）你是说在倾斜的一侧@GCyrillus？变形元素上的

背面可见性：隐藏
是否在你的Chrome中修复（你在Mac上吗？）。是的，倾斜部分，我使用Chrome窗口。。。backface没有帮助：(