CSS前后形状不同的按钮

Question

我尝试编写上面的示例代码，但我仍然无法理解。它适用于一定的长度，但是当长度改变时（因为里面的内容）它会中断，我必须手动配置 padding-bottom。

举个例子：

这是我的代码：

.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

CSS前后形状不同的按钮

CSS Button with different shape before and after

css

pseudo-class