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

Question

图形如下，就是一个大阔号，箭头向下。但非前端专业，做的时候自己无从下手，希望高手指点。谢谢。

如果不能，那只能用图片了。用图片无法方便控制长度，比较麻烦。

Answer 1

我也来贡献个答案吧。主要是减少输入的计算变量，只需考虑修复&nbsp;.quote&nbsp;的高度以及圆角的宽度&nbsp; &nbsp; <div class="quote"><div></div></div>&nbsp; &nbsp; <style type="text/css">&nbsp; &nbsp; .quote {&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; width: 100%; /* any width */&nbsp; &nbsp; &nbsp; &nbsp; height: 40px;/* fix zero height */&nbsp; &nbsp; }&nbsp; &nbsp; .quote::before, .quote::after, .quote ::before, .quote ::after {&nbsp; &nbsp; &nbsp; &nbsp; content: '';&nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; width: calc(50% - 20px);&nbsp; &nbsp; &nbsp; &nbsp; height: 20px;&nbsp; &nbsp; &nbsp; &nbsp; border-style: solid;&nbsp; &nbsp; &nbsp; &nbsp; border-color: #000;&nbsp; &nbsp; &nbsp; &nbsp; border-width: 0;&nbsp; &nbsp; }&nbsp; &nbsp; .quote ::before, .quote ::after {&nbsp; &nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; &nbsp; &nbsp; border-bottom-width: 1px;&nbsp; &nbsp; }&nbsp; &nbsp; .quote::before, .quote::after {&nbsp; &nbsp; &nbsp; &nbsp; top: 20px;&nbsp; &nbsp; &nbsp; &nbsp; border-top-width: 1px;&nbsp; &nbsp; }&nbsp; &nbsp; .quote ::before {&nbsp; &nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; &nbsp; border-bottom-left-radius: 20px;&nbsp; &nbsp; }&nbsp; &nbsp; .quote ::after {&nbsp; &nbsp; &nbsp; &nbsp; right: 0;&nbsp; &nbsp; &nbsp; &nbsp; border-bottom-right-radius: 20px;&nbsp; &nbsp; }&nbsp; &nbsp; .quote::before {&nbsp; &nbsp; &nbsp; &nbsp; left: 20px;&nbsp; &nbsp; &nbsp; &nbsp; border-top-right-radius: 20px;&nbsp; &nbsp; }&nbsp; &nbsp; .quote::after {&nbsp; &nbsp; &nbsp; &nbsp; right: 20px;&nbsp; &nbsp; &nbsp; &nbsp; border-top-left-radius: 20px;&nbsp; &nbsp; }&nbsp; &nbsp; </style>