html - 溢出 : hidden 元素上的 CSS 切 Angular

Question

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

一切正常，除了边框一直在白色 CSS 三 Angular 形上运行。这可以通过从 .contract span 中删除 overflow: hidden; 来解决。然而，我正在使用溢出来隐藏 span 元素内的文本，所以放弃它是没有选择的。

有谁知道在不改变我的 HTML 的情况下实现这一目标的方法吗？

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

截图:

这是预期的外观。

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

Answer 1

您可以使用 after 伪元素和 z-index 在白色三 Angular 形下方添加边框。

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;
}