css - 如何在 CSS3 中创建此按钮？

Question

到目前为止，我已经获得了以下 html 和 CSS。我坚持如何使用 CSS 实现右下角的样式。任何帮助表示赞赏。谢谢

HTML

<a href="#" class="btn">Size Chart</a>

CSS

.btn{
    background: rgba(0,167,253,0.5);
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #0093df;
}

JSFiddle

Answer 1

这是我使用 css 渐变的解决方案:HTML:

<span class="btn-outline"><a href="#" class="btn">Size Chart</a></span>

CSS:

.btn{
    background: rgba(0,167,253,1);
    background: linear-gradient(135deg, transparent 5px, #B2E4FE 5px);
    background: -o-linear-gradient(135deg, transparent 5px, #B2E4FE 5px);
    background: -moz-linear-gradient(135deg, transparent 5px, #B2E4FE 5px);
    background: -webkit-linear-gradient(135deg, transparent 5px, #B2E4FE 5px);
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: inline-block;
    padding: 5px 10px;
}
.btn-outline{
    background: #0093df;
    padding: 1px;
    background: -webkit-linear-gradient(135deg, transparent 5px,#0093df 5px);
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
     display: inline-block;
}

Fiddle