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

Question

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

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

Answer 1

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

Answer 2

@lizzz_led’s answer is great.

Let me contribute an answer too. The main thing is to reduce the input calculation variables and only need to consider fixing the height of .quote and the width of the rounded corners

    <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

No, it can be achieved using canvas. Just draw 2 and Sebel curves.
It is recommended to use pictures.

Answer 4

Let’s use pictures. . .

Answer 5

Use a picture and display it in the center. Use before and after to debug the upturned parts on both sides. This way you can adapt to it to the greatest extent

Answer 6

Even if the picture is stretched and deformed, it won’t look ugly

Answer 7

I am ignorant, what the hell is ccs3, I have only used css3