CODEWITHSUNDEEP
htmlcsscss-shapes
AND4011002849
AND4011002849

Reputation: 2001

Css inner border

enter image description here

jsfiddle.net/warpoluido/JkDhN/175/ - here is what I tried so far.

I'm trying to make the green part a little higher than the blue(or whatever color this is) one, like the image.

it has to be responsive

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

Upvotes: 1

Views: 399

Answers (3)

web-tiki
web-tiki

Reputation: 103750

Would this suit you :

DEMO

CSS I added (I also set .modulo-titulopagina_verde {height:65px;}) :

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

PS : I couldn't resist, flowers are much more peacefull than knifes...

Upvotes: 2

Alejandro Nanez
Alejandro Nanez

Reputation: 345

Try modifying

.modulo-titulopagina { width: ... }

to something smaller than 53%.

With 30% it will look like this: http://jsfiddle.net/alejandronanez/AtqQU/1/

Upvotes: 0

Sasanka Panguluri
Sasanka Panguluri

Reputation: 3128

Set the width of titulopagina to something less than 50%. the 30% looks like it solved your problem. Here's the Fiddle

.modulo-titulopagina {

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

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


}

Upvotes: 0

Related Questions