Как создать изогнутую линию с закругленными краями?

Question

Мне нужно создать линию, подобную этому изображению

но я не знаю, как сдедать закругленные концы линии

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

Можете ли вы помочь мне сделать закругленные края линии.

_{Свободный перевод вопроса How to create curved line with rounded edges? от участника @Alejandro Arias.}

Answer 1

Вы можете добавить два background слоя, чтобы создать круги по краям, как показано ниже:

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

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

Графику лучше создавать в SVG.

Для создания кривой можно использовать векторный редактор или ещё проще создать кривую с помощью генератора: Quadratic Bezier Curves

Закругление концов кривой делается с помощью атрибута stroke-linecap="round"

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="600" height="200" viewBox="0 0 600 200" preserveAspectRatio="xMinYMin" style="background:dodgerblue;border:1px solid" >  
  <g fill="none" stroke="white"  stroke-linecap="round" >
    <path d="M21,60 Q80,115 181,60 " stroke-width="20" /> 
      <path d="M220,60 Q350,115 480,60" stroke-width="30" /> 
  </g>
</svg>

В качестве бонуса:

Заполнение строки svg элемента окружностями

для этого необходимо:

длину черты установить равную нулю – stroke-dasharray=”0, пробел”
а пробел установить равным ширине строки stroke-width

Итого: stroke-dasharray=”0, 30″ stroke-width=”30″

при таких значениях параметров, строка элемента будет заполнена окружностями

Подробнее здесь

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="600" height="200" viewBox="0 0 600 200" preserveAspectRatio="xMinYMin" style="background:dodgerblue;border:1px solid" >  
  <g fill="none" stroke="white"  stroke-linecap="round" >
      <path d="M21,60 Q251,200 481,60" stroke-width="30" stroke-dasharray="0,30" /> 
  </g>
</svg>

Ещё пример: Визуализация ограничения дорожек бассейна:

.container {
 width:50vw;
 height:50vh;
}

<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0 0 600 400" preserveAspectRatio="xMinYMin" style="background:dodgerblue;border:1px solid" >  
  <g fill="none"  stroke="deeppink" stroke-linecap="round" stroke-width="20" stroke-dasharray="0,20" >
      <polyline points="10,40 600,40" stroke="deeppink" /> 
        <polyline points="10,140 600,140" stroke="#00FA9A" /> 
         <polyline points="10,240 600,240" stroke="yellow" /> 
          <polyline points="10,340 600,340" stroke="#ADFF2F" />
  </g>
</svg>  
</div>

Answer 3

#x:after{
content: ';)';
font-family: Courier New;
display: inline-block;
font-size: 125px;
color: red;
-webkit-text-stroke: 10px green;
text-shadow: 0 -125px 0 blue;
filter: drop-shadow(0 -250px 0 gray);
transform: rotate(90deg);
}

<q>Оцените насколько код SVG короче решения CSS</q>
<br>
<b id='x'>не сильно то и короче,<br>
если хорошо постараться</b>

БЛОГ НА HUSL

Как создать изогнутую линию с закругленными краями?

Ответы (3 шт):

Заполнение строки svg элемента окружностями