Css 圆三角问题

我想设计这样的东西

我使用以下代码创建了它：

box-sizing: border-box;
width: 20px;
height: 20px;
background: white;
border-top: solid 2px red;
border-left: solid 2px red;
border-top-left-radius: 8px;
border-right: solid 2px transparent;
border-bottom: solid 2px transparent;
transform: rotate(45deg);

这是我一直在玩的代码的代码笔：

但现在的问题是，我在

div

中有一些按钮，当背景颜色发生变化时，在

div

中滚动时会出现这种情况。我尝试了z-index的内容和其他方式，但没有运气：

---

那么，我如何才能删除三角形的下半部分，或者有其他整洁的方法吗。任何帮助都将不胜感激。

关于

三角形的单线解决方案类：p

备选案文1。玩渐变

background: linear-gradient(135deg, green 0% 50%, transparent 50%);

备选案文2

不清楚您如何更改背景颜色。。。在卷轴上？按钮点击

不管怎样，这肯定是通过JS实现的

那么为什么不为
.wrapper
的所有第一个子div设置相同的背景色呢

顺便说一句，漂亮的圆角三角形


document.querySelector（“按钮”）.addEventListener（“单击”，函数）（）{
document.queryselectoral（“.wrapper>div”）.forEach（函数（div）{
div.style.background=“#aae8c4”；
});
})
.wrapper{
填充：25px；
}
.wrapper>div{
背景：绿色；
}
.列表框{
位置：相对位置；
宽度：300px；
高度：100px；
边框：2倍纯红；
边界半径：8px；
}
.三角形{
位置：绝对位置；
顶部：25px；
左：100px；
框大小：边框框；
宽度：20px；
高度：20px；
边框顶部：实心2px红色；
左边框：实心2px红色；
边框左上半径：8px；
右边框：实心2px透明；
边框底部：实心2px透明；
变换：旋转（45度）；
}





改变我的颜色我的意思是，我在div中有一些按钮，这些按钮的背景与div不同，因此，在不同的背景下，三角形的下半部分显示在屏幕截图中。我用一个有趣的东西编辑。。。但是通常这是你问的。谢谢你的努力。让它现在工作，虽然它不是完美的。另一个编辑…；）这就是我最后得到的！但您不需要额外的边框样式。只需一个边框就可以了。对不起，我看不出你能用这两个选项。这又回到了我当前问题的第一步。
clip-path: polygon(0 100%, 0 0, 100% 0);