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

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

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

Let’s use pictures. . .

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

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

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