Css 如何制作具有弯曲边缘的箭头

我使用了边界半径，但它不能使所有边都是圆的。我想做一个向下的箭头

.投箭{ 边框：实心FFDD00； 边框宽度：0px 20px 20px 0； 显示：内联块； 填充：40px； 变换：旋转45度； }

---

您的代码看起来像是在使用带有箭头整数的字体框架—可能类似于

您的css中没有描述的箭头。请看一看用于查找符号的字体。

---

要获得另一个箭头，字体需要支持另一个箭头，或者您必须使用另一种字体/构建您自己的字体。

您可以依靠伪元素来弯曲所有边：

.投箭{ -b:20px；/*边框宽度*/ 边框：实心FFDD00； 边框宽度：0pxvar-bvar-b0； 边框右下半径：var-b； 显示：内联块； 填充：40px； 变换：旋转45度； 利润率：30像素； 位置：相对位置； } .drop arrow：：在， .放置箭头：：在{ 内容：； 位置：绝对位置； 宽度：var-b； 高度：var-b； 背景：FFDD00； 边界半径：50%； } .放置箭头：：在{ 顶部：calc-1*var-b/2； 右：0； 转化：转化率100%； } .放置箭头：：在{ 左：calc-1*var-b/2； 底部：0； 转化：转化率100%； }