css - 如何创建带有圆 Angular 边缘的曲线？

Question

嗨，我需要创建一条像这样的图像的线

但我不知道如何结束圆 Angular 线边缘

.line{
  position: absolute;
  width: 55px;
  height: 10px;
  border: solid 12.5px #fff;
  border-color: white transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 10px;
  margin-top: 50px;}

你能帮我用重填的形式结束这一行吗？

Answer 1

您可以添加两个背景图层来在边缘创建圆圈，如下所示:

.line {
  --c:20px; /* control the size */
  
  width: 100px;
  margin-top:-100px;
  display:inline-block;
  box-sizing:border-box;
  border: solid var(--c) transparent;
  border-radius:50%;
  border-bottom-color:red;
  background:
    radial-gradient(farthest-side,red 98%,transparent) left  15% bottom 14%,
    radial-gradient(farthest-side,red 98%,transparent) right 15% bottom 14%;
  background-size:var(--c) var(--c);
  background-origin:border-box;
  background-repeat:no-repeat;
}

/* maintain the square ratio */
.line::before {
  content:"";
  display:block;
  padding-top:100%;
}

<div class="line"></div>
<div class="line" style="--c:30px;width:200px"></div>
<div class="line" style="--c:40px;width:120px"></div>
<div class="line" style="--c:10px;width:150px"></div>