能不能用 CSS3 画出以下图形？感谢！

Question

图形如下，就是一个大阔号，箭头向下。但非前端专业，做的时候自己无从下手，希望高手指点。谢谢。如果不能，那只能用图片了。用图片无法方便控制长度，比较麻烦。

Answer 1

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

    <div class="quote"><div></div></div>

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