how to make curve line

[Astronaut]

how to make curve line using css code ??

[Paulie_D]

It depends on what you are trying to do.

You can do a couple of things with radial gradients or border radius but these usually require unsemantic mark-up or pseudo-elements.

Do you have an example we could look at?

https://css-tricks.com/how-to-ask-a-good-question-in-the-forums/

[Chris]

If you need to draw a curved line that ends at a specific point you will need to use canvas as CSS alone can’t draw advanced shapes and lines.

[Paulie_D]

Or an SVG path but that’s HTML not CSS.

:)

[Astronaut]

   
 #curve{
            margin:0 auto;
            position:relative;
            width:200px;
            height:200px;
            border-top:1px solid red;
            border-left:1px solid red;
            border-top-left-radius:200px;
            float:left;
            margin-left:100px;
            box-shadow:inset 0 1px 0 black;
            }
    
            #curve:after{
            content:"";
            position:absolute;
            width:196px;
            height:196px;
            border-top:1px solid red;
            border-left:1px solid red;
            border-top-left-radius:196px;
            left:4px;
            top:4px;
            box-shadow:0 1px 0 black;
            }
    
    
    
    
    

codedeck link

inset shadow is working on upper curve, but normal shadow is not working for curve below it ??
the ques is can i give shadow to the " curve:before " as well,if yes then how??

[Astronaut]

thnks for reply , and sorry for fewer info…

but now i have updated my ques : )

i want two curves one with inset shadow and another (below one) with normal shadow .
so that it looks like curve pipe(what evr) ?

[Author]

Posts