Incomplete circle with line in the middle - css

Question

How can I achieve this shape with CSS:
Ideally, I'd like a background shadow effect too.

Answer 1

You can do this with CSS but it realy isn't the best way to make it. It will need to add unsemantic markup, and probably a lot of CSS.
If you don't want to use an image, I would suggest to use an inline SVG it is much better to control shapes like the one you are trying to achieve.
With SVG:
I made this quick example using a path element with arc commands :
svg{
display:block;
width:30%; height:auto;
}
body{background:url('http://i.imgur.com/qi5FGET.jpg');background-size:cover;}
<svg viewbox="0 0 10 10">
<path d="M4.5 1 A4.05 4.05 0 0 0 4.5 9z M8.4 3 A4.05 4.05 0 0 0 5.5 1 V9 A4.05 4.05 0 0 0 8.4 7"
stroke-width="0.8" fill="transparent" stroke="#000"/>
</svg>
With CSS :
I also made this CSS example with a possible approach if you really want to go with CSS. It uses only one div and two pseudo elements. The lines are made with borders and border-radius :
div {
position: relative;
width: 100px;
padding-bottom: 100px;
border-radius: 50%;
}
div:before,div:after {
box-sizing: border-box;
content: '';
width: 48%;
height: 100%;
position: absolute;
border: 10px solid #000;
}
div:before {
border-radius: 900px 0 0 900px;
}
div:after {
right: 0;
border-radius: 0 35px 35px 0;
border-right-color:transparent;
}
body{background:url('http://i.imgur.com/qi5FGET.jpg');background-size:cover;}
<div></div>

Answer 2

One CSs posibility
.test {
width: 200px;
height: 200px;
border: solid 10px black;
border-radius: 50%;
border-right-color: transparent;
background-image: linear-gradient(90deg, transparent 85px, black 85px, black 115px, transparent 115px);
position: relative;
}
.test:after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 10px;
margin: auto;
background-color: white;
top: -10px;
bottom: -10px;
}
<div class="test"></div>

Answer 3

Here is another CSS alternative which just uses a single pseudo element to create the extra side of the shape.
The after creates the extra curve with a partially transparent border (the right side).
body {
background: skyblue;
}
div {
width: 50px;
height: 100px;
border: 10px solid black;
border-radius: 75px 0px 0px 75px;
position: relative;
box-sizing: border-box;
}
div:after {
content: '';
top: -10px;
width: 50px;
height: 100px;
border-width: 10px;
border-style: solid;
border-right-color: transparent;
border-radius: 0px 39px 39px 0px;
position: absolute;
left: 45px;
box-sizing: border-box;
}
<div></div>