使用CSS切角

• Z时代
• 2024-01-10
• 分类：问答

我希望“剪切” div的左上角，就像您将页面的角向下折叠一样。

我想用纯CSS做到这一点，有什么方法吗？

回答：

如果父元素具有纯色背景，则可以使用伪元素创建效果：

div {
    height: 300px;
    background: red;
    position: relative;
}
div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid red;
    width: 0;
}
<div></div>

即将推出border-corner-shape的正是您想要的东西。太糟糕了，它可能会超出规格，并且永远不会在野外被任何浏览器使用:(

以上是 使用CSS切角 的全部内容， 来源链接： utcz.com/qa/411263.html