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：我无法抗拒，鲜花比刀子更安静......

Answer 2

将titulopagina的宽度设置为小于50％。 30％看起来像是解决了你的问题。这是Fiddle

.modulo-titulopagina {

    position:relative;
    background: #166270; /* Old browsers */

    height: 65px;
    width:30%;
    -moz-border-radius-bottomtop: 50px;
    border-top-right-radius: 50px;


}

Answer 3

尝试修改

.modulo-titulopagina { width: ... }

小于53％。

30％会显示如下：http://jsfiddle.net/alejandronanez/AtqQU/1/