Html CSS对角边框输入字段

我正在尝试创建以下表单，其中输入字段有一个对角线，以便它们很好地配合在一起，请参见下图以获得更准确的描述。

然而，我无法做到这一点，因为我不知道如何做到这一点。我尝试过跨越边界，但没有成功

---

有人知道怎么做吗？

您可以对容器应用

变换：skewX

，对项目应用“撤消”变换（通过应用相同的变换，但角度符号相反），并使用外部容器的

溢出：隐藏

隐藏外角，如下所示：

表单{
利润率：20px；
溢出：隐藏；
宽度：350px；
}
.行{
显示器：flex；
变换：skewX（-15度）；
利润率：0-5px；
}
.细胞{
显示器：flex；
利润率：0.3倍；
溢出：隐藏；
}
.宽{
弹性：1；
}
.cell>*{
变换：skewX（15度）；
利润率：0-5px；
边界：无；
弹性：1；
}
输入{
填充：4px 5px 4px 15px；
背景：黄色；
}
钮扣{
填充：4px25px 4px20px；
背景：粉红色；
}

按我

我会在末尾添加一个单独的span元素，然后使用border bottom/top/left/right并将它们设置为您需要的颜色

大概是这样的：

.角度输入{
边界：无；
高度：50px；
浮动：左；
显示：块；
}
输入：焦点{
大纲：无；
}
.添加角度{
显示：块；
浮动：左；
右边框：30px实心透明；
边框底部：50px实心#ffffff；
}

我喜欢伊利亚的

skew

解决方案。超有创意

这里有一个选项，使用一些

：after

伪元素和CSS三角形来创建倾斜效果。为了达到预期效果，我们在左输入的右侧和右输入/按钮的左侧添加了

：之后的
伪元素

以下是最终效果：



.container{
显示器：flex；
弯曲方向：立柱；
背景色：#565452；
填充：20px；
}
.行{
显示器：flex；
}
.行：非（：最后一个子项）{
边缘底部：60px；
}
.场{
宽度：计算（100%-10px）；
位置：相对位置；
背景色：#565452；
}
.field：第一个孩子{
右边距：30px；
}
.菲尔德：之后{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
宽度：0px；
高度：0px；
}
.字段：第一个孩子：之后{
右图：-15px；
边框顶部：60px实心#ffffff；
右边框：15px实心透明；
}
.field:最后一个孩子：之后{
左：-15px；
边框底部：60px实心#ffffff；
左边框：15px实心透明；
}
.field.field--按钮{
弹性基准：25%；
}
.field.field--button:after{
边框底部：60px实心#F9D838；
}
.输入{
边界：无；
线高：60px；
大纲：无；
填充：0 15px；
宽度：100%；
框大小：边框框；
背景色：#ffffff；
字号：18px；
}
.input:：占位符{
颜色：#中交；
}
.按钮{
背景色：#F9D838；
颜色：#ffffff；
边界：无；
大纲：无；
线高：60px；
字体大小：30px；
宽度：100%；
填充：0 30px 0 20px；
文本转换：大写；
}

去
上传您迄今为止尝试过的代码。一个快速的谷歌搜索引发了这一问题：请先做您自己的研究，然后再问Stackoverflowwauw谢谢，看起来很棒！
<style>
    .angled-input{
    border: none; 
    height: 50px;
    float: left;
    display:block;
    }
    input:focus{
        outline: none;
    }
    .add-angle{
    display: block;
    float:left;
    border-right:30px solid transparent;
    border-bottom: 50px solid #ffffff;
    }
</style>
<form>
  <input class="angled-input"/><span class="add-angle"></span>
</form>