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

Question

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

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

Answer 1

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

Answer 2

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

Answer 3

不能， 能用 canvas 實現， 畫2跟賽貝爾曲線就行了。
建議還是用圖片吧。

Answer 4

還是用圖片吧。 。 。

Answer 5

用圖片吧，居中顯示， 兩側的上翹部分用before，after調試一下吧. 這樣也就最大程度上適應了吧

Answer 6

即使用圖片，拉長變形了，也不難看吧

Answer 7

是我孤陋寡聞，ccs3什麼鬼，只用過css3