如何在示例中创建h1？

Question

我想在下面创建h1标头作为示例.我在某个网站上看到过这种类型的标题,我现在还记不起它的地址了.如果我记得,我会从他们的网站上复制它.不幸的是我忘记了.这是PSD屏幕截图:

无论如何,无论我尝试过什么,我仍然无法得到结果.我得到的是:

这是我的代码:

div.big-header div.header-left h1 {
    float: left;
    color: #fff;
    background: #c00000;
    font: bold 35px "Open Sans";
    padding: 1px 5px;
    margin-bottom: 35px;
}

这是JSFiddle

问题:如何创建标题作为上面的示例(第一张图片)

Answer 1

试试这样:演示

更新了 演示

更新:刚刚添加了display:inline,line-height with box-decoration-break以及你的代码..

CSS:

h1 {
    color: #fff;
    background: #c00000;
    font: bold 35px sans-serif;
    padding: 1px 5px;
    margin-bottom: 35px;
    /* newly added code */
    display:inline;
    line-height:44px;
   -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
     box-decoration-break: clone;
}