html - CSS内边框

jsfiddle.net/warpoluido/JkDhN/175/-这是我到目前为止尝试过的。

我正在尝试使绿色部分比蓝色（或它的任何颜色）高一些，例如图像。

它必须响应

<div class="modulo-titulopagina_verde">
<header class="modulo-titulopagina">
    <div class="page-header">
        <div class="container">
            <div class="col-12 col-offset-1 col-lg-10 col-lg-offset-1">
            <h1><span>{galeria}</span> {Mod_TituloTitulo}</h1>
            </div>
        </div>
        <!--BEGIN MOD_TITULO_SUBTITULO -->
        <!-- END MOD_TITULO_SUBTITULO -->
    </div>
    </div>
</header>

CSS：

.modulo-titulopagina {
    position:relative;
    background: #166270; /* Old browsers */
    height: 65px;
    width:33%;
    -moz-border-radius-bottomtop: 50px;
    border-top-right-radius: 50px;
}

.modulo-titulopagina_verde {
    background: none repeat scroll 0 0 #72C267;
    height: 65px;
    position: relative;
    width: 100%;
}

.modulo-titulopagina h1 {
    color: #FFFFFF;
    font-family: 'myriadpro-light';
    font-size: 34px;
    margin: -10px 0 0;
    text-align: center;
}

最佳答案

这适合您：

DEMO

我添加的CSS（我也设置了.modulo-titulopagina_verde {height:65px;}）：

.modulo-titulopagina_verde:after{
    content:'';
    background:inherit;
    height:10px;
    display:block;
    width:47%;
    position:absolute;
    right:0;
}

PS：我无法抗拒，花朵比刀子更宁静...