如何在CSS中捏住一行的中间

我正在尝试制作一条看起来几乎在末端有衬线的线条。本质上，我想让它在最末端变宽，在中间变细，只需使用 css。这实际上被证明是一个相当大的挑战。

任何帮助，将不胜感激。

到目前为止，我已经能够了解我想要如何使用:after伪选择器，但顶部没有运气，我只能看起来是凹的，而不是凸的。

这是我到目前为止所做的代码

    .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;
    }

和 HTML

<section class="stage">
    <figure class="line"></figure>
</section>

这是迄今为止我所拥有的小提琴（另外，我需要将其旋转到某些区域）

http://jsfiddle.net/speo9bfv/1/ http://jsfiddle.net/speo9bfv/1/

谢谢您的帮助！

如果您有纯背景颜色，您可以使用伪元素来做到这一点：

DEMO http://jsfiddle.net/webtiki/qu52yvhf/

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;
}