CODEWITHSUNDEEP
csssvgcss-shapes
Alejandro Arias
Alejandro Arias

Reputation: 307

How to create curved line with rounded edges?

Hi I need create a line like this image Line rounded

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

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

bad line

Upvotes: 3

Views: 3388

Answers (3)

puffleeck
puffleeck

Reputation: 121

#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);
}
<b id='x'>feel power of CSS</b>

Upvotes: 2

Alexandr_TT
Alexandr_TT

Reputation: 14545

To create a curve, you can use a vector editor or even easier, create a curve using a generator: Quadratic Bezier Curves

Rounding the ends of a curve is done using the attribute: 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="M300,100 Q430,155 560,100" stroke-width="30" /> 
  </g>
</svg>

as a bonus

Filling a line svg element with circles

for this you need:

  • set stroke length to zero – stroke-dasharray=”0, space”
  • and set the space equal to the width of the line stroke-width

Entire entry: 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>

Another example: visualization of pool lane restrictions:

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

Upvotes: 3

Temani Afif
Temani Afif

Reputation: 272900

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>

Upvotes: 6

Related Questions