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

我试图剪切设置了上边框的

span

元素的左上角

除了边框一直在白色CSS三角形上运行之外，所有这些都可以正常工作。这可以通过移除

溢出：隐藏来修复.contract

span中选择code>。然而，我正在使用溢出来隐藏span元素中的文本，所以删除它是没有选择的

有人知道在不改变HTML的情况下实现这一点的方法吗

示例：

屏幕截图：

这是预定的外观

这是我现在使用CSS的结果，注意上面的边框在剪切三角形上

---

您可以使用after伪元素和

z-index

在白色三角形下添加边框

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

---

您是否尝试过不同的

框大小调整

属性？我认为

box size:border box

应该可以解决您的问题

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

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

---

fiddle:

为什么不删除上边框？正如您在预期布局中所看到的那样，上边框在

激活的

元素上是必需的。@GerritBertier:所以您需要绿色区域上的边框，而不是白色三角形区域上的边框？@GerritBertier:在这种情况下，在我看来，web tiki的答案是最好的选择。这将删除

.contract active

元素的上边框。@GerritBertier抱歉，我完全没有抓住要点。我重新格式化了我的答案以满足您的需要。关闭，但您在其他

元素上丢失了边框。contract active

元素，我更新了这里的提琴以取回它。谢谢更新的小提琴：这会导致圆角，这是我不想要的。你能解释一下你想做什么吗？