如何使标题色带响应

Question

I have the following JSFiddle: http://jsfiddle.net/eotamvwy/

HTML:

<div class="infobox-container">
    <div class="triangle-l"></div>
    <div class="triangle-r"></div>
    <div class="infobox">
        <h3><span>This is the Header</span></h3>
        <p>This is the content of the infobox.<p/>
    </div>
</div>

How can I modify the CSS so that it is responsive?

I have a div which has the following style:

width: 98%
padding: 0 1% 0 1%

I want to insert the infobox-container inside and stretch it 100% and resize based on the above div.

Answer 1

Use percentage units for responsiveness and for triangles you don't need extra elements, you could use :after and :before :pseudo-elements on .infobox h3 .

Updated Fiddle

 body { width: 100%; margin: 0; } .main-container { width: 98%; padding: 0 1% 0 1%; text-align: center; } .infobox-container { position: relative; display: inline-block; margin: 0; padding: 0; width: 100%; } .infobox { width: 80%; padding: 10px 5px 5px 5px; margin: 10px; position: relative; z-index: 1; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55); background: #424242; background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242)); background-image: -moz-linear-gradient(top, #6a6a6a, #424242); color: #fff; font-size: 90%; } .infobox h3 { position: relative; width: calc(100% + 22px); color: #fff; padding: 10px 5px; margin: 0; left: -15px; -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55); background: #3198dd; background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd)); background-image: -moz-linear-gradient(top, #33acfc, #3198dd); font-size: 160%; text-align: center; text-shadow: #2187c8 0 -1px 1px; font-weight: bold; } .infobox h3:before, .infobox h3:after { content: ''; border-color: transparent #2083c2 transparent transparent; border-style: solid; border-width: 12px; height: 0; width: 0; position: absolute; left: -12px; top: 100%; transform: translateY(-50%); z-index: -1; /* displayed under infobox */ } .infobox h3:after { border-color: transparent transparent transparent #2083c2; left: 100%; margin-left: -12px; } .infobox a { color: #35b0ff; text-decoration: none; border-bottom: 1px dotted transparent; } .infobox a:hover, .infobox a:focus { text-decoration: none; border-bottom: 1px dotted #35b0ff; } 

 <div class="main-container"> <div class="infobox-container"> <div class="infobox"> <h3><span>This is the Header</span></h3> <p>This is the content of the infobox.</p> </div> </div> </div> 

Answer 2

I think you can just make a couple of small changes to make all the sizes responsive at least to the content:

The most important changes:

Use 'Calc' to set the width. Support is reasonable well (see caniuse ), but you could also solve this differently using negative margins (or probably other ways as well).

.infobox h3 {
    width: calc(100% + 20px);
} 

The right arrow can simply be solved by setting right to -12px , just as the left one has left: -12px .

.infobox-container .triangle-r {
    right: -12px;
}

 .infobox-container { position: relative; display: inline-block; margin: 0; padding: 0; width: auto; } .infobox { padding: 10px 5px 5px 5px; margin:10px; position: relative; z-index: 90; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55); box-shadow: 0px 0px 3px rgba(0,0,0,0.55); background: #424242; background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242)); background-image: -moz-linear-gradient(top,#6a6a6a,#424242); color: #fff; font-size: 90%; } .infobox h3 { position: relative; width: calc(100% + 20px); color: #fff; padding: 10px 5px; margin: 0; left: -15px; z-index: 100; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55); box-shadow: 0px 0px 3px rgba(0,0,0,0.55); background: #3198dd; background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd)); background-image: -moz-linear-gradient(top,#33acfc,#3198dd); font-size: 160%; text-align: center; text-shadow: #2187c8 0 -1px 1px; font-weight: bold; } .infobox-container .triangle-l { border-color: transparent #2083c2 transparent transparent; border-style:solid; border-width:13px; height:0; width:0; position: absolute; left: -13px; top: 54px; z-index: 2; /* displayed under infobox */ } .infobox-container .triangle-r { border-color: transparent transparent transparent #2083c2; border-style:solid; border-width:13px; height:0; width:0; position: absolute; right: -12px; top: 54px; z-index: 2; /* displayed under infobox */ } .infobox a { color: #35b0ff; text-decoration: none; border-bottom: 1px dotted transparent; } .infobox a:hover, .infobox a:focus { text-decoration: none; border-bottom: 1px dotted #35b0ff; } 

 <div class="infobox-container"> <div class="triangle-l"></div> <div class="triangle-r"></div> <div class="infobox"> <h3><span>This is the Headewefewfewfewfewfewfewfr</span></h3> <p>This is the content of the infobox.</p> </div> </div> 

Answer 3

If you want this header ribbon to be responsive, you need to get away from using fixed-widths and instead combine width:100%; and max-width: 270px; (or whatever).

When you define the width attribute to be 270px, you are telling the browser you want this particular element to have both a minimum and maximum width of 270px. If you are thinking responsively, what you actually want is for your element to expand as much as possible ( width:100% ), but to max-out at 270px ( max-width: 270px; ).

Thats the responsive bit.

What you are actually after is something closer to this:

http://jsfiddle.net/TheIronDeveloper/eotamvwy/3/

 * { box-sizing: border-box; } .infobox-container { position: relative; display: block; margin: 0; padding: 0; max-width: 500px; width: 100%; } .infobox { padding: 3em 5px 5px; margin:10px; position: relative; z-index: 90; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55); box-shadow: 0px 0px 3px rgba(0,0,0,0.55); background: #424242; background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242)); background-image: -moz-linear-gradient(top,#6a6a6a,#424242); color: #fff; font-size: 90%; } .infobox-ribbon { position: absolute; top: 10px; width: 100%; color: #fff; padding: 10px 5px; margin: 0; z-index: 100; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55); box-shadow: 0px 0px 3px rgba(0,0,0,0.55); background: #3198dd; background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd)); background-image: -moz-linear-gradient(top,#33acfc,#3198dd); font-size: 160%; text-align: center; text-shadow: #2187c8 0 -1px 1px; font-weight: bold; } .infobox-container .triangle-l { border-color: transparent #2083c2 transparent transparent; border-style:solid; border-width:13px; height:0; width:0; position: absolute; left: -12px; top: 45px; z-index: 0; /* displayed under infobox */ } .infobox-container .triangle-r { border-color: transparent transparent transparent #2083c2; border-style:solid; border-width:13px; height:0; width:0; position: absolute; right: -12px; top: 45px; z-index: 0; /* displayed under infobox */ } .infobox a { color: #35b0ff; text-decoration: none; border-bottom: 1px dotted transparent; } .infobox a:hover, .infobox a:focus { text-decoration: none; border-bottom: 1px dotted #35b0ff; } 

 <div class="infobox-container"> <div class="triangle-l"></div> <div class="triangle-r"></div> <h3 class="infobox-ribbon">This is the Header</h3> <div class="infobox"> <p>This is the content of the infobox.</p> </div> </div> 

I did a few things here:

1. I applied * {box-sizing:border-box;} , which does a nicer job at making elements "mold" to the widths that I tell them to (regardless of margins), more details here
2. I took the h3 ribbon out of the infobox, and changed its position to absolute. My reasoning is that the h3-ribbon needs to conform to the info-box container's width, not the infobox itself. That way, regardless of the width, the ribbon will conform to its parent, and the infobox can occupy its 100% + margins (which should always be even on both sides.)
   3. And like I mentioned before, I changed the fixed-width of the infobox-container to width:100%;max-width:500px; . If you try resizing down, the ribbon stays in place.