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

Question

我使用了border-radius，但是并不能使所有的边缘都变圆。我想做一个向下的箭头。

.drop-arrow {
  border: solid #FFDD00;
  border-width: 0px 20px 20px 0;
  display: inline-block;
  padding: 40px;
  transform: rotate(45deg);
}

<span class='drop-arrow'></span>

Answer 1

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

.drop-arrow {
  --b:20px; /* border-width */

  border: solid #FFDD00;
  border-width: 0px var(--b) var(--b) 0;
  border-bottom-right-radius:var(--b);
  display: inline-block;
  padding: 40px;
  transform: rotate(45deg);
  margin:30px;
  position:relative;
}
.drop-arrow::before,
.drop-arrow::after {
   content:"";
   position:absolute;
   width:var(--b);
   height:var(--b);
   background:#FFDD00;
   border-radius:50%;
}
.drop-arrow::before {
  top:calc(-1*var(--b)/2);
  right:0;
  transform:translateX(100%);
}
.drop-arrow::after {
  left:calc(-1*var(--b)/2);
  bottom:0;
  transform:translateY(100%);
}

<span class='drop-arrow'></span>

<span class='drop-arrow' style="--b:30px;"></span>
<span class='drop-arrow' style="--b:15px;"></span>

要将圆形边缘添加到内部，可以添加如下所示的渐变色：

.drop-arrow {
  --b:20px; /* border-width */

  border: solid #FFDD00;
  border-width: 0px var(--b) var(--b) 0;
  border-bottom-right-radius:var(--b);
  background:
   radial-gradient(farthest-side at top left,transparent 98%,#FFDD00 100%) 
    bottom -0.5px right -0.5px/var(--b) var(--b) no-repeat;
  display: inline-block;
  padding: 40px;
  transform: rotate(45deg);
  margin:30px;
  position:relative;
}
.drop-arrow::before,
.drop-arrow::after {
   content:"";
   position:absolute;
   width:var(--b);
   height:var(--b);
   background:#FFDD00;
   border-radius:50%;
}
.drop-arrow::before {
  top:calc(-1*var(--b)/2);
  right:0;
  transform:translateX(100%);
}
.drop-arrow::after {
  left:calc(-1*var(--b)/2);
  bottom:0;
  transform:translateY(100%);
}

<span class='drop-arrow'></span>

<span class='drop-arrow' style="--b:30px;"></span>
<span class='drop-arrow' style="--b:15px;"></span>

Answer 2

您的代码看起来就像您使用的字体框架中的箭头完整，也许像https://fontawesome.com/之类。

css中没有描述的箭头。查看用于查找符号的字体。 要获得另一个箭头，字体需要支持另一个箭头，或者您必须使用其他字体/构建自己的字体。