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 could use SVG for this. There is an [arc path command](http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands) which you could use. 

As your comment states, you want to place content inside the arc and you want them to rotate. 

Content like text or image could be placed inside the svg. 
Rotation can be achieved with `transform=rotate(..)`. 

If you want to do more animations with SVG you could have a look at [D3.js](http://d3js.org/). If you just want to create some arcs, you possibly can do the math on your own for computing the SVG path string.
@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>
```