CSS 溢出元素的切角：隐藏

Question

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

一切正常，除了边框保持运行在白色 CSS 三角形上。这可以通过从 .contract 跨度中删除 overflow: hidden; 来解决。然而，我正在使用溢出来隐藏 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

将左上角的边框半径添加到 .contract.contract-active

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

fiddle: http://jsfiddle.net/swapnilmotewar/yt887kaj/4/

CSS 溢出元素的切角：隐藏

CSS corner cut-out on element with overflow: hidden

html

css

css-shapes