带溢出的元素上的CSS角切出:隐藏

我正在尝试剪切span设置了顶部边框的元素的左上角.

一切都很好,除了边框一直在白色CSS三角形上运行.这可以通过overflow: hidden;从.contract跨度中删除来修复.但是,我使用溢出来隐藏span元素中的文本,因此删除它是没有选择的.

有没有人知道如何在不改变HTML的情况下实现这一目标？

示例: http ://jsfiddle.net/yt887kaj/

截图:

这是预期的外观.

这是我现在拥有的CSS的结果,注意在切出的三角形上运行的顶部边框.

您可以使用after伪元素并z-index在白色三角形下添加边框.

DEMO

.contract-start::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 10px solid #fff;
    border-right: 10px solid transparent;
    z-index:1;
}
.contract-start::after{
    content: "";
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    border-top: 1px solid #62b38f;
    border-left: 1px solid #fff;
    z-index:0;
}