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

Question

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

一切正常，除了边框一直在白色CSS三角形上运行。可以通过从overflow: hidden;范围中删除.contract来解决此问题。但是，我使用溢出来隐藏span元素中的文本，因此删除它是没有选择的。

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

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

截图：

这是预期的外观。

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

Answer 1

您可以使用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;
}

Answer 2

您是否尝试过其他box-sizing财产？我认为box-sizing: border-box应该可以解决您的问题。 http://css-tricks.com/box-sizing/

Answer 3

将左上角的border-radius添加到.contract.contract-active

.contract.contract-active{
border-radius: 17px 0 0 0;
}

小提琴：http://jsfiddle.net/swapnilmotewar/yt887kaj/4/