如何在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

Answer 2

我可能会使用:before和:after找到解决方案：

.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;
    position: relative;
}
.btn:after, .btn:before {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 0;
    height: 0;
    border: 4px solid white;
    border-color: transparent white white transparent;
    z-index: 2;
}
.btn:before {
    border: 5px solid #0093df;
    border-color: transparent #0093df #0093df transparent;
    z-index: 1;
}

DEMO

请注意，它使用白色背景，因此如果您的背景没有单色，则可能无效。