Html 带有css问题的响应三角形

我正在用css制作响应三角形（向下箭头）。我的问题是，我想增加我的三角形高度向下，但当我增加填充底部它扰乱了三角形的形状

这是我的密码：

.btna{
位置：相对位置；
显示：内联块；
高度：50px；
宽度：25%；
文本对齐：居中；
颜色：白色；
线高：50px；
文字装饰：无；
垫底：15%；
背景剪辑：内容框；
溢出：隐藏；
}
.btna分区{
内容：“；
位置：绝对位置；
顶部：0px；
左：0；
背景：-网络工具包线性梯度（#d5adee，#fff）；/*用于Safari 5.1到6.0*/
背景：-Opera 11.1至12.0的o型线性梯度（#d5adee，#fff）；/**/
背景：-适用于Firefox 3.6至15的moz线性渐变（#d5adee，#fff）；/**/
背景：线性渐变（#d5adee，#fff）；/*标准语法*/
垫底：50%；
宽度：57.7%；
z指数：-1；
-webkit转换原点：0；
-ms变换原点：0；
变换原点：0；
-webkit变换：旋转（-30度）斜交（30度）；
-ms变换：旋转（-30度）倾斜（30度）；
变换：旋转（-30度）斜X（30度）；
}

---

我假定您希望将三角形保持在其.btna类的边界内，对吗

下面的代码保留了一个三角形，同时也使其具有更高的高度并保持响应

替换

transform:rotate（-30度）skewX（30度）带有

transform: rotate(-45deg) scale(1.4);

“倾斜”对于将任何三角形变成直角三角形都非常有用，但是因为我们都准备好从一个三角形开始（溢出截止的正方形），所以它没有多大帮助