带圆角的CSS曲线 [英] CSS curved line with rounded

问题描述

我需要像这样的图像创建一行

Hi I need create a line like this image

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

but I don't know how to end rounded line-edge

.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;}

您能帮我用redounded结尾吗

Can you help me to end the line with redounded form?

推荐答案

您可以添加两个背景层以在如下边缘处创建圆圈：

You may add two background layers to create the circles at the edges like below:

.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>

这篇关于带圆角的CSS曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！