首先，我们会实现一个内部挖出一个矩形的矩形：
核心 CSS 代码如下：
div {
height: 200px;
background:
linear-gradient...(90deg, #9c27b0, #9c27b0 110px, transparent 110px, transparent 190px, #9c27b0 190px),
linear-gradient...10px, transparent 0, transparent 39px, #000 40px, #000);
}
}
}
得到这样一个简单的图形：
看到这里，肯定会疑惑，为什么这个图形需要用...通过一个 Gif 图更直观的感受：
这里有几个细节需要注意：
.g-content 这一层需要设置 background、需要 overflow: hidden（可以自己尝试去掉看看效果）
外侧的直角也变成了圆角...好了，本文到此结束，希望本文对你有所帮助
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新,欢迎点个 star 收藏。
云服务器
ICP备案
云直播
对象存储
腾讯会议
