Css 悬停时使用倾斜背景填充元素

我正在尝试创建一个CSS按钮悬停效果。但我没有设法用倾斜的形状填充元素

如何规划悬停效果：

截图1：它的实际外观

截图2：我希望悬停效果看起来像倾斜的一面

。按钮\u滑动\u bg{
颜色：#31302B；
背景：#FFF；
填充：12px 17px；
利润率：25px；
字体系列：“OpenSansBold”，无衬线；
边框：3px实心#31302B；
字体大小：14px；
字体大小：粗体；
字母间距：1px；
文本转换：大写；
边界半径：2px；
显示：内联块；
文本对齐：居中；
光标：指针；
长方体阴影：插图0#31302B；
-webkit过渡：全部轻松0.8秒；
-moz转换：所有的易用0.8秒；
过渡：均为0.8s；
}
.按钮\u滑动\u背景：悬停{
盒影：插入200px 0#31302B；
颜色：#FFF；
}

---

Buttontext

您可以使用css

：after

。按钮\u滑动\u bg{
颜色：#31302B；
背景：#FFF；
填充：12px 17px；
利润率：25px；
字体系列：'OpenSansBold'，无衬线；
边框：3px实心#31302B；
字体大小：14px；
字体大小：粗体；
字母间距：1px；
文本转换：大写；
边界半径：2px；
显示：内联块；
文本对齐：居中；
光标：指针；
长方体阴影：插图0#31302B；
-webkit过渡：全部轻松0.8秒；
-moz转换：所有的易用0.8秒；
过渡：均为0.8s；
位置：相对位置；
}
.按钮\u滑动\u背景：悬停{
盒影：插入200px 0#31302B；
颜色：#FFF；
}
.按钮\u滑动\u背景：之后{
内容：''；
显示：块；
位置：绝对位置；
右：0；
底部：0；
宽度：0；
身高：0；
边框宽度：0；
边框颜色：透明透明#fff透明；
边框样式：实心；
边框宽度：0 0 32px 30px；
-webkit过渡：全部轻松0.8秒；
-moz转换：所有的易用0.8秒；
过渡：均为0.8s；
}

---

buttonext

您可以使用此答案中描述的技术：并倾斜伪元素，使其以斜面填充按钮：

div{
位置：相对位置；
显示：内联块；
填充：15px 70px；
边框：5px实心#B17461；
颜色：#B17461；
字体大小：30px；
字体系列：arial；
过渡：颜色。5s；
溢出：隐藏；
}
部门：以前{
内容：''；
位置：绝对位置；
顶部：0；左侧：0；
宽度：130%；高度：100%；
背景：#B17461；
z指数：-1；
变换原点：0；
变换：translateX（-100%）skewX（-45度）；
转变：转变；
}
div:悬停{
颜色：#fff；
}
div:悬停：之前{
变换：translateX（0）skewX（-45度）；
}

---

按钮

我相信您实际上是在寻找用背景色填充整个元素的结束状态，而不是留下空白。您还可以使用

线性渐变

背景图像，并转换其

背景大小

和

背景位置

，如下面的代码片段所示

在伪元素或变换上使用

线性渐变

的一个缺点是浏览器支持较低，但不需要额外的伪元素，因此可以将它们留作其他用途

。按钮\u滑动\u bg{
颜色：#31302B；
背景：#FFF；
填充：12px 17px；
利润率：25px；
字体系列：“OpenSansBold”，无衬线；
边框：3px实心#31302B；
字体大小：14px；
字体大小：粗体；
字母间距：1px；
文本转换：大写；
边界半径：2px；
显示：内联块；
文本对齐：居中；
光标：指针；
背景图像：线性梯度（135度，#31302B 50%，透明51%）；
背景尺寸：100px 100px；/*获得倾斜外观的一些初始尺寸*/
背景位置：-50px-50px；/*初始隐藏的负定位*/
背景重复：无重复；
过渡：均为0.8s；
}
.按钮\u滑动\u背景：悬停{
背景大小：200%200%；/*200%，因为渐变仅为50%着色*/
背景位置：0px 0px；/*使其完全可见*/
颜色：#FFF；
}

按钮文字
按钮文本过长
带换行符的按钮文本

按钮文本
带有多个
行
中断