我正在尝试剪掉设置了上边框的 span
元素的左上角。
一切正常,除了边框一直在白色 CSS 三 Angular 形上运行。这可以通过从 .contract
span 中删除 overflow: hidden;
来解决。然而,我正在使用溢出来隐藏 span 元素内的文本,所以放弃它是没有选择的。
有谁知道在不改变我的 HTML 的情况下实现这一目标的方法吗?
示例: http://jsfiddle.net/yt887kaj/
截图:
这是预期的外观。
这是我现在拥有的 CSS 的结果,请注意顶部边框在切出的三 Angular 形上方。
最佳答案
您可以使用 after 伪元素和 z-index
在白色三 Angular 形下方添加边框。
.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;
}
关于html - 溢出 : hidden 元素上的 CSS 切 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28067997/