CSS按钮前后有不同的形状

Question

我尝试编写上面的例子，但我仍然无法得到它。它的工作时间有一定的长度，但是当长度发生变化时（由于里面的内容），它会断开，我必须手动配置填充底部。

这是一个例子：

这是我的代码：

.tjbtn, .tjbtn--orange, .tjbtn--green {
    font-size: 1em;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    padding: 1em;
    line-height: 3em;
    text-transform: uppercase;
    letter-spacing: 2px;
    background-image: url("http://tj.cadman.ws/button_bg_orange.svg");
}

是否有可能在没有附加背景图像的情况下对此进行编码，并且无论宽度如何都使其流畅？

提前致谢！

Answer 1

提供display: inline-block;并更改为background-size: 100%;将对您有效。

.tjbtn, .tjbtn--orange, .tjbtn--green {
    font-size: 1em;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    padding: 1em;
    line-height: 3em;
    text-transform: uppercase;
    letter-spacing: 2px;
    background-image: url("http://tj.cadman.ws/button_bg_orange.svg");
    display: inline-block;
}

<强> Fiddle