Question: How can I create an arc shape like this: 

![shape](https://i.stack.imgur.com/gZ24R.png)

With CSS or jquery or javascript

Answer: 
You don't even need CSS/JS to draw this. Just use an `<svg>` element.

```html
<svg width="270" height="120">
    <path
       d="M 49.155517,102.32765 C 127.54837,40.541934 209.51266,103.2205 209.51266,103.2205 l 0,0 C 259.33409,50.363364 259.15552,50.363364 259.15552,50.363364 126.68749,-56.114356 2.1861831,50.204194 2.1861831,50.204194 z"
       stroke-width="3"
       stroke="#A5423A"
       fill="none"
    />
</svg>
```
@AlliterativeAlice is correct.

But for this shape I would use two arcs instead of a lot of C paths.
I also prefer to use relative paths instead of absolute one.

So my solution used arcs and lines instead of only Bezier Curves.

```html
<svg width="300px" height="300px" viewBox="0 0 100 100">
  <path d="m 10,60 
          a 50 50 0 0 1 80,0
          l -10,10
          a 40 40 0 0 0 -60 0Z" stroke-width="1" stroke="#A5423A" fill="none" />
</svg>
```