Can I create a stright line having circle at both ends with Clip path CSS?-CodePudding

I will like to achieve something like this

I have tried using clip path, but I am struggling achieving the desired result. Any help will be appreciated

CodePudding user response：

You need mask for this:

.box {
  --h: 50px;  /* height of the element */
  --b: 60%;   /* height of the bar */
  width: 200px;
  
  height: var(--h);
  background: linear-gradient(90deg,red, blue);
  -webkit-mask: 
    linear-gradient(#000 0 0) 
      50%/calc(100% - var(--h)) var(--b) no-repeat, 
    radial-gradient(calc(var(--h)/2) at calc(var(--h)/2) 50%, #000 96%, #0000) 
      0 50%/calc(100% - var(--h)) 100% repeat-x;
}

<div ></div>

<div  style="width:300px;--b:45%;"></div>

CodePudding user response：

Honestly, you'd probably be better off using an SVG (https://developer.mozilla.org/en-US/docs/Web/SVG) instead of a clip-path if you need something like that. Here's one I did really quickly in Illustrator but you can make SVGs in several other apps as well. Not saying you necessarily couldn't use a clip-path to accomplish this but it seems like it would be more work than the 5 minutes it took to make the SVG and map the gradient.

svg {
  fill: url(#gradient);
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="250px" viewBox="0 0 500 250">
  <defs>
    <linearGradient id="gradient">
      <stop offset="0%" stop-color="#00ff77" />
      <stop offset="100%" stop-color="#ffef00" />
    </linearGradient>
  </defs>
  <path d="M350.333,84.055c-15.52,0-28.956,8.881-35.531,21.833H105.531C98.957,92.937,85.52,84.055,70,84.055
    c-22,0-39.833,17.834-39.833,39.833c0,22,17.834,39.834,39.833,39.834c15.52,0,28.956-8.881,35.531-21.833h209.271
    c6.574,12.952,20.011,21.833,35.53,21.833c21.999,0,39.833-17.834,39.833-39.834C390.166,101.889,372.332,84.055,350.333,84.055z" />
</svg>