How to add custom margins and control their shape using css?

I am trying to style h1 using following image...

Currently my code as following...

h1{
    background:#add2cb;
    padding:15px 20px;
    color:#387475;
fo开发者_运维知识库nt-size:16px;
font-weight:bold;
}

But i want yours help to add left and right bottom curve using css. I have tried lots of ways, please help me to rewrite css code to achieve this. thanks.

You should totally check out Harry Roberts version, the beauty is you won't be requiring any additional elements to pull it off.

http://csswizardry.com/2011/02/css-powered-ribbons-the-clean-way/

This method will include a few images, however because they're only for the curled under parts there will be less weight to download and will degrade better.

You cannot add curves like that with CSS alone, those will have to be a single image. If the H1's are all going to be the same size, then you can have an image of the bottom of that and then add this line to your h1 CSS

background: url("path/to.image") bottom center no-repeat;

I'm not sure if it is possible to make it work with H1's that are different sizes unless you want to use <div>s instead.

With 1`s you can do this:

HTML:

<div class="heading"><span>Text Goes Here</span><div>

CSS:

.heading { background: url("left-curve-image.jpg") left center no-repeat #add2cb;
           padding:15px 20px;
           color:#387475;
           font-size:16px;
           font-weight:bold; }
.heading span { background: url("right-curve-image.jpg") right center no-repeat #add2cb; }

Just please note that you will need snips of the left and right side of the curve from top to bottom