http://codepen.io/lizzz0523/pen/Xmqzxw

@lizzz_led 的回答很棒。

我也来贡献个答案吧。主要是减少输入的计算变量，只需考虑修复 .quote 的高度以及圆角的宽度

    <p class="quote"><p></p></p>
    <style type="text/css">
    .quote {
        position: relative;
        width: 100%; /* any width */
        height: 40px;/* fix zero height */
    }
    .quote::before, .quote::after, .quote ::before, .quote ::after {
        content: '';
        display: block;
        position: absolute;
        width: calc(50% - 20px);
        height: 20px;
        border-style: solid;
        border-color: #000;
        border-width: 0;
    }
    .quote ::before, .quote ::after {
        top: 0;
        border-bottom-width: 1px;
    }
    .quote::before, .quote::after {
        top: 20px;
        border-top-width: 1px;
    }
    .quote ::before {
        left: 0;
        border-bottom-left-radius: 20px;
    }
    .quote ::after {
        right: 0;
        border-bottom-right-radius: 20px;
    }
    .quote::before {
        left: 20px;
        border-top-right-radius: 20px;
    }
    .quote::after {
        right: 20px;
        border-top-left-radius: 20px;
    }
    </style>

不能， 能用 canvas 实现， 画2跟赛贝尔曲线就行了。
建议还是用图片吧。

还是用图片吧。。。

用图片吧，居中显示， 两侧的上翘部分用before，after调试一下吧. 这样也就最大程度上适应了吧

即使用图片，拉长变形了，也不难看吧

是我孤陋寡闻，ccs3什么鬼，只用过css3