Html 如何创建三角形'；有输入和按钮的表单？

---

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

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

.form{
宽度：400px；
高度：80px；
保证金：0px自动；
背景：1E9BAF；
位置：相对位置；
盒影：-7px15px0px-5pxRGBA（0,0,0,0.3）；
}
.三角形，
.triangle>div{
宽度：0px；
高度：0px；
位置：绝对位置；
边框：40px实心透明；
}
.左三角形{
左：-55px；
右边框：15px固体#1E9BAF；
}
.leftTriangle>div{
左：-42px；
顶部：-30px；
z指数：-1；
右边框：15px实心rgba（0,0,0,0.3）；
}   
.直角三角形{
右：-55px；
左边框：15px固体#1E9BAF；
}
.rightTriangle>div{
右：-28px；
顶部：-30px；
z指数：-1；
左边框：15px实心rgba（0,0,0,0.3）；
}

---

另一种方法是使用CSS转换。主要思想如中所述

您可以将框阴影直接添加到.rhombus:before和：after（但我注意到了Mozilla中的一些问题），也可以使用这些伪元素的偏移量和副本制作另一个包装器

表单{
显示器：flex；
柔性包装：包装；
保证金：0；
填充：30px 20px；
边界：无；
字体系列：无衬线；
}
表格标题{
弹性基准：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度）；
变换原点：中心-底部；
/*盒影：3px 5px#DDD*/
}
朗伯斯先生：之后{
底部：0；
-webkit变换：rotateX（-30度）；
-webkit变换原点：中间-顶部；
-ms变换：rotateX（-30度）；
-ms变换原点：中心-顶部；
变换：rotateX（-30度）；
变换原点：中心-顶部；
/*盒影：5px 5px#DDD*/
}

ОСТАВИТЬ ЗАЯВКУ
ОТПРАВИТЬ

与您上一个问题的答案类似：）。4个渐变+背景大小也可以在此处执行此操作：

表单{
字号：2em；
背景：
线性梯度（-250度，透明1em，#1E9BAF 1.01em）左上角无重复，
线性梯度（70度，透明1em，#1E9BAF 1.01em）左下角无重复，
线性梯度（250度，透明1em，#1E9BAF 1.01em）右上角无重复，
线性梯度（-70度，透明1em，#1E9BAF 1.01em）右下角无重复；
背景大小：60%50.3%；
盒影：0.1.25em 15px-1.25em；
背景大小：60%50%；
边缘：2米；
填充：0.5em；
文本对齐：居中
}
标签{显示：块；颜色：白色}
[输入]{背景：线性渐变（到顶部，#ffab00，#fff800）}

发短信
是的，如果不能使用pseudo，那么使用“阴影框”可以复制元素的形状，并将其放置在元素下方以产生阴影效果selectors@MarikZuckor这是你的目的吗？你可以像上一个问题一样使用渐变，同样的形状…我不想读这篇文章。是mnogo bukaffСззззззггаааззззззжжжжазззаззазаззззазззазззза1079。转型(а так же вправо и влево для компенсации искажения от поворота). Вот пример:  Как добиться этого без трансформации я не придумал. Может быть, что-то можно сделать градиентами, как предлагалось в другом ответе.