html - 如何在另一个div的右上角创建三 Angular 形以看起来被边框分开

Question

我想创建如下图所示的形状:

我像这张图片一样创建了三 Angular 形，并将边距设置为右上角，但我不知道如何让它看起来像图片中所示的那样从左边的 div 分开。

我是否必须“剪切”左边的 div 以保留其灰色边框并看起来与绿色三 Angular 形分开？

有什么办法吗？

编辑:

1. 我在页面上使用固定的导航栏，所以当我滚动时如果 div 是 position:absolute，导航栏会在 div 后面。
2. 绿色三 Angular 形和其余 div 之间的空间应该是透明的，因为我使用图像作为页面背景。

Answer 1

鉴于以下标记，我建议:

#box {
    width: 10em;
    height: 6em;
    border: 4px solid #ccc;
    background-color: #fff;
    position: relative;
}

#box::before,
#box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}

#box::before {
    border-width: 1.5em;
    border-right-color: #ccc;
    border-top-color: #ccc;
}

#box::after {
    border-radius: 0.4em;
    border-width: 1.35em;
    border-right-color: #0c0;
    border-top-color: #0c0;
}

<div id="box"></div>