Css inner border

Question

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

Please post your code within the question as you were told when you added that JSFiddle link. — James Donnelly
– James Donnelly, Commented May 23, 2014 at 13:31
your demo looks fairly OK, you can just need to tweak it a little. — King King
– King King, Commented May 23, 2014 at 13:32
Just change the width of the blue bar? .modulo-titulopagina — Nick R
– Nick R, Commented May 23, 2014 at 13:33
@KingKing but if I do so, it will look like this jsfiddle.net/warpoluido/JkDhN/175 — AND4011002849
– AND4011002849, Commented May 23, 2014 at 13:34
You need to reduce the width amount of the blue bar that should do the trick. — Harry
– Harry, Commented May 23, 2014 at 13:35

web-tiki · Accepted Answer · 2014-05-23 14:38:44Z

2

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...

answered May 23, 2014 at 14:38

web-tiki

104k33 gold badges226 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sasanka Panguluri · Accepted Answer · 2014-05-23 13:33:16Z

0

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;


}

answered May 23, 2014 at 13:33

Sasanka Panguluri

3,1484 gold badges35 silver badges54 bronze badges

2 Comments

AND4011002849 Over a year ago

jsfiddle.net/warpoluido/JkDhN/175 I need to add 10px height to the green part without affect the blue one

Sasanka Panguluri Over a year ago

.modulo-titulopagina_verde { background: none repeat scroll 0 0 #72C267; height: 95px;} Change it in modulo_titulopagina verde

Alejandro Nanez · Accepted Answer · 2014-05-23 13:38:03Z

0

Try modifying

.modulo-titulopagina { width: ... }

to something smaller than 53%.

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

answered May 23, 2014 at 13:38

Alejandro Nanez

4452 gold badges7 silver badges16 bronze badges

1 Comment

AND4011002849 Over a year ago

jsfiddle.net/warpoluido/JkDhN/175 I need to add 10px height to the green part without affect the blue one

Collectives™ on Stack Overflow

Css inner border

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related