Css 带渐变和尖头的动态高度按钮

我想创建一个以渐变为背景的按钮和一个可以根据按钮的高度进行调整的尖头，这取决于里面的文本量。页面背景可能会有所不同，所以我不能使用纯色作为尖端。我提出的最佳解决方案是使用after pseudo element和svg代码作为背景图像，将背景高度设置为100%，但这个解决方案并不能让我太满意，因为我不知道它在所有现代浏览器上是否都很好看。你有什么想法吗？也许我应该使用Javascript

按钮示例
html，正文{
身高：100%；
}
身体{
背景色：#E5；
}
.包装纸{
背景色：#ffffff；
填充：15px；
最大宽度：180像素；
保证金：0自动；
}
.btn{
位置：相对位置；
显示：内联块；
背景：#000000线性梯度（到底部，#000000，#6666）；
颜色：#ffffff；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：粗体；
填充：8px 20px；
右边距：12px；
边缘底部：15px；
边框左上半径：4px；
边框左下半径：4px；
}
.btn：：之后{
内容：''；
位置：绝对位置；
顶部：0px；
右：-12px；
显示：内联块；
身高：100%；
宽度：13px；
背景图像：url（“数据：图像/svg+xml，%3Csvg xmlns=”http://www.w3.org/2000/svg'width='13'height='40'%3E%3ClinearGradient id='css-btn-example'gradientUnits='userSpaceOnUse'x1='6.5'y1='40'x2='6.5'%3E%3csp offset='0'stop color='%23666'/%3E%3csp offset='1'/%3E%3C/linearGradient%3E%3C路径填充='url（%23css btn示例）“d='M0 0h1l12 20L1 40H0z'/%3E%3C/svg%3E”）；
背景尺寸：13px100%；
}
.btn：最后一个孩子{
页边距底部：0；
}
一行
两行按钮示例
三行按钮长示例
如果梯度总是从上到下（或者从底到上），你可以用下面的歪斜来考虑一些技巧。其思想是使用伪元素，在其中应用两个不同的渐变，它们将以相同的颜色相交，从而产生一个渐变的错觉


.box{
宽度：150px；
填充：20px；
框大小：边框框；
位置：相对位置；
颜色：#fff；
z指数：0；
溢出：隐藏；
保证金：5px；
边界半径：5px 0 5px；
}
.box:之前，
.盒子：之后{
内容：“；
位置：绝对位置；
z指数：-1；
身高：50%；
左：0；
右：0；
}
.盒子：以前{
排名：0；
背景：线性渐变（至底部，蓝色，#4100bf）；
变换：斜交（30度）；
变换原点：右下角；
}
.盒子：之后{
底部：0；
背景：线性渐变（顶部，紫色，#4100bf）；
变换：斜X（-30度）；
变换原点：右上角；
}

这里有一些文字
这里有些文字这里有些文字
您尝试过什么？请添加您的代码。@KoshVery我已经添加了我的代码，谢谢您的提醒谢谢，这对其他人也有帮助。第二种解决方案非常适用于只有一个背景的页面，谢谢：）