Css 如何在矩形中创建底部箭头孔

我想更改网站上的按钮。 这样地。

但我不知道如何更改此按钮的底部样式。

---

我听说我们可以使用“：：after”或“：：before”来实现这一点。

类似的内容是100个选项之一

。我特别喜欢的东西{
位置：相对位置；
填充：20px 30px；
背景颜色：橙色；
显示：内联块；
}
.我的特别之处：在{
位置：绝对位置；
右：30px；
底部：-10px；
宽度：20px；
高度：20px；
内容：''；
显示：块；
背景色：白色；
变换：旋转（45度）；
}

---

发布作业

是的，这可以通过使用“之前和之后”来实现，请检查下面的代码

.Box{
宽度：200px；
高度：50px；
背景色：#F7E6D2；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.Box：：之前{
底部：0；
左：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
边框颜色：rgba（0,0,0,0）；
边框底色：#F4；
边框宽度：11px；
左边距：-11px；
}
.Box：：之后{
底部：0；
左：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
边框颜色：rgba（255、255、255、0）；
边框底色：#ffffff；
边框宽度：10px；
左边距：-10px；
}

案例

Kevin Powell在这里解释了如何制作相同的形状。你会在这里找到你的答案