javascript - 使用边框的带有右圆 Angular 箭头 css 的部分划分

Question

你好，我需要有这种部门划分。问题是制作右箭头，但对我来说最重要的是使用边框制作它，这样我就可以轻松地对其进行操作(例如，更改颜色、宽度等)有什么共同的解决办法吗？最好使用纯 css 解决此问题，但如果您知道任何其他解决方法，请提出建议。

Answer 1

是这样的吗？

.menu-item::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -11px;
    background-color: red;
    width: 20px;
    height: 22px;
    background-color: #cccccc;
    z-index: 1;
    transform: rotate( 45deg ) translateY( -50% );
    transform-origin: top;
    border-radius: 5px;
    border-top: solid 2px rgb(236, 240, 241);
    border-right: solid 2px rgb(236, 240, 241);
}

https://jsfiddle.net/punb5k49/

您可以制作一个矩形并使其旋转 45 度并具有边框半径以产生那种效果。不是那么完美，但总比没有好

编辑*

如果你不明白我的意思，请看这张图片并将其与我的 jsfiddle 进行比较