html - Css 内边框

Question

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;
}

Answer 1

这个适合你吗:

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 : 忍不住了，花比刀静多了...