How to pinch the middle of a line in css - html

Question

I'm trying to make a line that almost looks like it has serifs at the ends. Essentially, I want to make it wider at the very ends and thin in the middle, just using css. This has actually proven to be quite a challenge.
Any help would be appreciated.
Thus far I've been able to get the bottom to look how I want using the :after pseudo selector, but no luck with the top, which I can only seem to get concave, rather than convex.
Here's the code of what I've done so far
.line {
background:none;
height: 8px;
position:relative;
overflow:hidden;
z-index:1;
top: 50px;
left: 50px;
width: 140px;
box-shadow: 11px 12px 16px -3px rgba(0,0,0,0.6);
-webkit-transform: rotate(38deg);
transform: rotate(38deg);
}
.line:after {
content: '';
position: absolute;
left: 0%;
width: 100%;
padding-bottom: 10%;
top: 50%;
border-radius: 35%;
box-shadow: 0px 0px 0px 150px rgba(0,0,0,0.6);
z-index: -1;
}
.line:before {
content: '';
position: absolute;
left: 0%;
width: 100%;
padding-bottom: 8%;
top: -30%;
border-radius: 35%;
box-shadow: 0px 0px 0px 150px rgba(255,255,255, 1);
z-index: 24 !important;
}
and the HTML
<section class="stage">
<figure class="line"></figure>
</section>
Here's the fiddle of what I have thus far (also, I'm gonna need to rotate it for certain areas)
http://jsfiddle.net/speo9bfv/1/
Thanks for the help!

Answer 1

If you have a plain background color, you can do this with pseudo elements :
DEMO
HTML :
<section class="stage">
<figure class="line"></figure>
</section>
CSS :
.line {
height: 8px;
position:relative;
overflow:hidden;
z-index:1;
top: 50px;
left: 50px;
width: 140px;
-webkit-transform: rotate(38deg);
transform: rotate(38deg);
background:rgba(0,0,0,0.6);
}
.line:after, .line:before {
content:'';
position: absolute;
left:0;
width:100%;
height:100%;
border-radius: 35%;
background:#fff;
}
.line:after{
top:5px;
}
.line:before{
bottom:5px;
}

Answer 2

I would try using gradients to create the illusion of a pinched line.
black -> white -> black
black line
black -> white -> black
I wanted this to just be a comment, but I couldn't make new lines like I wanted.
Here's a fiddle for you:
http://jsfiddle.net/qaqafc6f/
Here is a better one, with rotate applied.
http://jsfiddle.net/qaqafc6f/2/
Note this does not use :before or :after, and is probably more cross-browser compatible (as long as you add the vendor prefixes).

Answer 3

If you need a transparency around this shape you could use two pseudo elements with a curved border-radius and multiple box-shadows to colour in the space between them:
.line {
height: 8px;
position:relative;
overflow:hidden;
z-index:1;
top: 50px;
left: 50px;
width: 140px;
-webkit-transform: rotate(38deg);
transform: rotate(38deg);
}
.line:after, .line:before {
content:'';
position: absolute;
left:-10px;
right:-10px;
height:100%;
border-radius: 50%;
background:transparent;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .5), 5px 0 0px 2px rgba(0, 0, 0, .5), -5px 0 0px 2px rgba(0, 0, 0, .5), 10px 0 0px 2px rgba(0, 0, 0, .5), -10px 0 0px 2px rgba(0, 0, 0, .5), 15px 0 0px 2px rgba(0, 0, 0, .5), -15px 0 1px 2px rgba(0, 0, 0, .5), 20px 0 0px 2px rgba(0, 0, 0, .5), -20px 0 0px 2px rgba(0, 0, 0, .5), 25px 0 0px 2px rgba(0, 0, 0, .5), -25px 0 0px 2px rgba(0, 0, 0, .5), 30px 0 1px 1px rgba(0, 0, 0, .5), -30px 0 1px 1px rgba(0, 0, 0, .5);
}
Or - if an inline svg datauri is acceptable - you could do something like:
.svg-stick {
margin-top:200px;
display:block;
width:140px;
height:8px;
background: transparent url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iM...etc...) center center no-repeat;
background-size:100% 100%;
-webkit-transform: rotate(38deg);
transform: rotate(38deg);
}
Both demoed here: http://jsfiddle.net/eqaL4g5q/